我已经尝试这样做，但是当我以这种方式单击"提交按钮"时似乎没有任何反应。
var pw = document.getElementById("userid");
fonk() {
if (pw.length < 5 || > 12) {
alert("userid must be 5-12 characters long.");
}
}<fieldset style="width:20%;">
<legend>JavaScript</legend>
<form id="form">
<table align="center" style="margin-top: -100px">
<tr>
<td><label> user id</label></td>
<td><input type="label" name="userid"></td>
</tr>
<br>
<tr>
<td><label>Password</label></td>
<td><input type="label" name="id"></td>
</tr>
<br>
<tr>
<td><label>Username</label></td>
<td><input type="label" name="id"></td>
</tr>
<br>
<tr>
<td><label>Email</label></td>
<td><input type="Email" name="id"></td>
</tr>
<br>
<tr>
<td><label>Sex</label></td>
<td><input type="radio" name="id">Male <input type="radio" name="id">Female </td>
</tr>
<br>
<tr>
<td><label>About</label></td>
<td> <textarea> </textarea></td>
</tr>
<br>
<tr>
<td><button type="Submit" onclick="fonk()">Submit</button></td>
<td><button type="Reset">Reset</button></td>
</tr>
</table>
</form>
</fieldset>用户 ID 和密码的长度应介于 7-12 个字符之间，并且用户名应仅包含字符。
你不能像这样使用和操作 if(number1 == 1 || == 2(这并不意味着数字1 == 1或2，您应该为每个操作指定变量
你的 if 语句应该是这样的：
if(pw.length > 7 && pw.length < 12) {} //valid password
else{
console.log("warning , invalid password");
}
或
if(!(pw.length > 7 && pw.length < 12)) //invalid password
// statement for userid check length if < 7 and > 12 alert message show
if(userId.value.length < 7 || userId.value.length >= 12) {
alert('Userid should between 7 and 12 character');
}
// statement for password check length if < 7 and > 12 alert message show
if(password.value.length < 7 || password.value.length >= 12) {
alert('password should between 7 and 12 character');
}
// alphabet only, for username
let lettersRegex = /^[A-Za-z]+$/;
if(!username.value.match(lettersRegex)) {
alert('Please input alphabet characters only');
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<fieldset style="width:20%;">
<legend>JavaScript</legend>
<table style="margin-top: -100px">
<tr>
<td><label> user id</label></td>
<td><input type="text" name="userid"></td>
</tr>
<br>
<tr>
<td><label>Password</label></td>
<td><input type="text" name="password"></td>
</tr>
<br>
<tr>
<td><label>Username</label></td>
<td><input type="text" name="username"></td>
</tr>
<br>
<tr>
<td><label>Email</label></td>
<td><input type="Email" name="email"></td>
</tr>
<br>
<tr>
<td><label>Sex</label></td>
<td>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</td>
</tr>
<br>
<tr>
<td><label>About</label></td>
<td> <textarea> </textarea></td>
</tr>
<br>
<tr>
<td><button onclick="fonk()">Submit</button></td>
<td><button type="Reset">Reset</button></td>
</tr>
</table>
</fieldset>
<script>
let username = document.getElementsByName('username')[0];
let userId = document.getElementsByName('userid')[0];
let password = document.getElementsByName('password')[0];
function fonk() {
if(userId.value.length < 7 || userId.value.length >= 12) {
alert('Userid should between 7 and 12 character');
}
if(password.value.length < 7 || password.value.length >= 12) {
alert('password should between 7 and 12 character');
}
let lettersRegex = /^[A-Za-z]+$/;
if(!username.value.match(lettersRegex)) {
alert('Please input alphabet characters only');
}
}
</script>
</body>
</html>代码中的问题：
- if (pw.length <5 ||pw.length>12( {
- var pw = document.getElementById("userid"(; 没有 id 为 "userid" 的元素。将其更改为正确的选择器。
- var pw = document.getElementById("userid"(.value;
顺便说一句， 尽量避免客户端验证。 我可以很容易地删除对函数或任何内容的调用并逃避此测试。