JavaScript 密码和用户名验证

Question

我试过了，但是当我这样点击 'Submit button' 时似乎没有任何反应。

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>

用户名和密码长度应在7-12个字符之间，用户名只能由字符组成。

Answer 1

你不能像这样使用 and 操作 if(number1 == 1 || == 2) 这并不意味着 number1 == 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

Answer 2

  // 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>

Answer 3

代码中的问题：

if (pw.length < 5 || pw.length > 12) {
var pw = document.getElementById("userid"); 没有 ID 为 "userid" 的元素。将其更改为正确的选择器。
var pw = document.getElementById("userid").value;

顺便说一句，尽量避免客户端验证。我可以很容易地删除对函数的调用或任何东西并逃避这个测试。

JavaScript 密码和用户名验证

JavaScript password and username verification

javascript

passwords

verification