javascript - 表单验证适用于一个脚本,但不适用于另一个,我不知道为什么!JavaScript
问题描述
我正在尝试学习如何进行表单验证并弄清楚如何做某些事情,我在其中一个脚本上进行了尝试,看看我是否可以对名称和密码设置规则。然后后来去我的原始表单脚本将验证表单应用到它,我无法让它工作。知道为什么吗?
表单验证试用:
const name = document.getElementById('userID')
const password = document.getElementById('password')
const form = document.getElementById('form')
const errorElement = document.getElementById('error')
form.addEventListener('submit', (e) => {
let messages = []
if (name.value === '' || name.value == null) {
messages.push('Name is required')
}
if(name.value.length <= 6) {
alert('name must be longer than 6 characters')
}
if (password.value.length <= 6) {
messages.push('Password must be longer than 6 characters')
}
if (password.value.length >= 20) {
messages.push('Password must be less than 20 characters')
}
if (password.value === 'password') {
messages.push('Password cannot be password')
}
if (messages.length > 0) {
e.preventDefault()
errorElement.innerText = messages.join(', ')
}
})
它工作的脚本(但我只需要替换 ID 即可工作)
<script defer src="formCheck.js"></script>
</head>
<div id="error"></div>
<form id="form" action="/" method="GET">
<div>
<label for="name">Name</label>
<input id="name" name="name" type="text" required>
</div>
<div>
<label for="password">Password</label>
<input id="password" name="password" type="password">
</div>
<input class="btn" type = "submit" value="upload" name = "UploadButton">
</form>
我无法让它工作的原始脚本:
<head>
<script defer src="formCheck.js"></script>
<title> Create User!</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<div class="userForm">
<h1>
Create User!
</h1>
<div id="error"></div>
<form method = "post" id="form" enctype = "multipart/form-data" action="/getUserInfo" name = "form">
<!-- /AddUser/:userID/:userName/:userGender/:userSeniority/:userHouse/:userLogin/:userPassword -->
<div class="txtb">
<label>User ID:</label>
<input type = "text" id="userID" name = "userID" value = "" placeholder="Enter ID" required>
</div>
<div class="txtb">
<label>User Name:</label>
<input type = "text" id="userName" name = "userName" value = "" placeholder="Enter Name" required>
</div>
<div class="txtb">
<label>User Gender:</label>
<select type = "text" placeholder = "Choose Gender" data-style="btn-info" name="userGender" required>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="txtb">
<label>User Nationality:</label>
<input type = "text" name = "userNationality" value = "" placeholder="Enter Nationality" required>
</div>
<!-- <div class="txtb">
<label>User Occupation:</label>
<select type = "text" placeholder = "Choose Occupation" data-style="btn-info" name="userOccupation">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="e">E</option>
</select>
</div> -->
<div class="txtb">
<label>User House:</label>
<select type = "text" placeholder = "Choose House" data-style="btn-info" name="userHouse" required>
<option value="0">Red</option>
<option value="1">Blue</option>
<option value="2">Green</option>
<option value="3">Purple</option>
</select>
</div>
<div class="txtb">
<label>User Login:</label>
<input type = "text" name = "userLogin" value = "" placeholder="Enter Login" required>
</div>
<div class="txtb1">
<label>User Property:</label>
<input type = "text" name = "userProperty" value = "" placeholder="Enter Property" required>
</div>
<div class="txtb1">
<label>User Department:</label>
<input type = "text" name = "userDepartment" value = "" placeholder="Enter Department" required>
</div>
<div class="txtb1">
<label>User Position:</label>
<input type = "text" name = "userPosition" value = "" placeholder="Enter Position" required>
</div>
<div class="txtb1">
<label>User Date Of Joining:</label>
<label>Month:</label>
<input type="number" min="1" max="12" step="1" name="userMonth" oninput="(validity.valid)||(value='');" required>
<label>Day:</label>
<input type="number" min="1" max="31" step="1" name="userDay" oninput="(validity.valid)||(value='');" required>
<label>Year:</label>
<input type="number" min="2020" max="2999" step="1" name="userYear" oninput="(validity.valid)||(value='');" required>
</div>
<div class="txtb">
<label>Profile Picture:</label>
<input type = "file" name = "picture" required>
</div>
<input class="btn" type = "submit" value="upload" name = "UploadButton">
</form>
<form method = "get" enctype = "multipart/form-data" action="/mainPage">
<input class = "btn" type = "submit" value="Main Page">
</form>
</div>
解决方案
推荐阅读
- c++ - 如何在 C++ 中将向量作为参数传递
- javascript - 编写 React/Framework 组件并构建纯 html/css
- scala - 一个POST方法请求Http4s的正确处理方式
- eclipse - MarketplaceDiscoveryStrategy 失败并出现错误无法完成对 https://marketplace 的请求
- javascript - Webpack 配置错误 - 请帮我纠正
- python - 干净的数据集空值等不能从 [datetime64[ns]] 到 [float64] 标签
- node.js - Material-UI DateRangerPicker 删除 dd/mm/yyyy
- javascript - 使用 google oauth 时我没有获得 access_token
- ocaml - OCaml 中作为模块类型的存在类型
- java - SqlAnywhere 问题在 jtds Android 中返回多行