Question

我正在创建一个注册表，其中包含用户名，名称，电子邮件，密码，确认密码和从属关系。这些字段使用javascript中的正则表达式进行了验证。我希望错误显示在表单中，并且我正在使用span标签来实现这一点。我不知道我要去哪里错了，因为它没有得到验证。

  function validation() {
    var userid = document.getElementById('userid').value;
    var fname = document.getElementById('fname').value;
    var lname = document.getElementById('lname').value;
    var email = document.getElementById('email').value;
    var psw = document.getElementById('psw').value;
    var psw_repeat = document.getElementById('psw_repeat').value;

    var usercheck = /^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]+$/;
    var fnamecheck = /^[A-Za-z. ]{3,20}$/;
    var lnamecheck = /^[A-Za-z. ]{3,20}$/;
    var emailcheck = /^[A-Za-z_]{3,}@[A-Za-z]{3,}[.]{1}[A-Za-z.]{2,6}$/;
    var pswcheck = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9@#$%^&*]{8,15}$/;

    if (usercheck.test(userid)) {
      document.getElementById('usererror').innerHTML = "";
    } else {
      document.getElementById('usererror').innerHTML = "**User id is         invalid";
      return false;
    }
    if (fnamecheck.test(fname)) {
      document.getElementById('fnameerror').innerHTML = "";
    } else {
      document.getElementById('fnameerror').innerHTML = "**Should not contain digits and special characters";
      return false;
    }
    if (emailcheck.test(email)) {
      document.getElementById('mail').innerHTML = "";
    } else {
      document.getElementById('mail').innerHTML = "**Email-id is invalid";
      return false;
    }
    if (pswcheck.test(psw)) {
      document.getElementById('pass').innerHTML = "";
    } else {
      document.getElementById('pass').innerHTML = "**Should not contain digits and special characters";
      return false;
    }
    if (psw.match(psw_repeat)) {
      document.getElementById('conpass').innerHTML = "";
    } else {
      document.getElementById('conpass').innerHTML = "**Password doesnot match";
      return false;
    }
 }

<html>
<body>
<form id="reg" method="post" onsubmit="return validation()">    
   <legend><b>Create an account</b></legend>
      <div class="form-group">
        <label for="userid">User id</label>
        <input type="text" placeholder="Enter your User id" class="form-              control" name="userid" id="userid">
         <span id="usererror" class="text-danger font-weight-bold"></span>
       </div>
       <div class="form-group">
         <label for="fname">First Name</label>
         <input type="text" placeholder="Enter your First name" class="form-            control" name="fname" id="fname">
         <span id="fnameerror" class="text-danger font-weight-bold"></span>
       </div>
        <div class="form-group">
          <label for="email">Email id</label>
           <input type="email" placeholder="Enter your Email-id" class="form-             control" name="email" >
            <span id="mail" class="text-danger font-weight-bold"></span>
          </div>
         <div class="form-group">
            <label for="psw">Password</label>
            <input type="password" placeholder="Enter Password" class="form-              control" id="psw">
            <span id="pass" class="text-danger font-weight-bold"></span>
          </div>
         <div class="form-group">
             <label for="psw_repeat">Confirm Password</label>
             <input type="password" placeholder="Re-enter Password"                        class="form-control" id="psw_repeat" >
             <span id="conpass" class="text-danger font-weight-bold"></span>
          </div>
          <div class="form-group">
              <div class="dropdown">
                 <label for="affiliation">Affiliation</label>
                  <select class="form-control">
                  <option value="alumni" name="affiliation">Alumni</option>
                  <option value="faculty" name="affiliation">Faculty</option>                   <option value="student" name="affiliation">Student</option>
                  </select>
               </div>
            </div>
            <div class="form-group">
            <button type="submit" class="btn btn-success" id="submit"                      name="submit">Register</button>
             <button type="reset" class="btn btn-danger">Cancel</button>
            </div>
        </form>
 </body>
 </html>

Answer 1

#lname不存在，所以document.getElementById('lname')是null；试图查找.value会破坏您的功能。

Answer 2

该文件名不在js文件中，并且有些文件在html文件中没有id值。

<html>
<body>
  <form id="reg" method="post" onsubmit="return validation()">
    <legend><b>Create an account</b></legend>
    <div class="form-group">
      <label for="userid">User id</label>
      <input type="text" placeholder="Enter your User id" class="form-control" name="userid" id="userid">
      <span id="usererror" class="text-danger font-weight-bold"></span>
    </div>
    <div class="form-group">
      <label for="fname">First Name</label>
      <input type="text" placeholder="Enter your First name" class="form-control" name="fname" id="fname">
      <span id="fnameerror" class="text-danger font-weight-bold"></span>
    </div>
    <div class="form-group">
      <label for="email">Email id</label>
      <input type="email" placeholder="Enter your Email-id" class="form-control" name="email" id="email">
      <span id="mail" class="text-danger font-weight-bold"></span>
    </div>
    <div class="form-group">
      <label for="psw">Password</label>
      <input type="password" placeholder="Enter Password" class="form-control" id="psw">
      <span id="pass" class="text-danger font-weight-bold"></span>
    </div>
    <div class="form-group">
      <label for="psw_repeat">Confirm Password</label>
      <input type="password" placeholder="Re-enter Password" class="form-control" id="psw_repeat">
      <span id="conpass" class="text-danger font-weight-bold"></span>
    </div>
    <div class="form-group">
      <div class="dropdown">
        <label for="affiliation">Affiliation</label>
        <select class="form-control">
          <option value="alumni" name="affiliation">Alumni</option>
          <option value="faculty" name="affiliation">Faculty</option>
          <option value="student" name="affiliation">Student</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-success" id="submit" name="submit">Register</button>
      <button type="reset" class="btn btn-danger">Cancel</button>
    </div>
  </form>
</body>

</html>




//Script file
     function validation() {
       var userid = document.getElementById('userid').value;
       var fname = document.getElementById('fname').value;
      //  var lname = document.getElementById('lname').value;
       var email = document.getElementById('email').value;
       var psw = document.getElementById('psw').value;
       var psw_repeat = document.getElementById('psw_repeat').value;

       var usercheck = /^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]+$/;
       var fnamecheck = /^[A-Za-z. ]{3,20}$/;
       //var lnamecheck = /^[A-Za-z. ]{3,20}$/;
       var emailcheck = /^[A-Za-z_]{3,}@[A-Za-z]{3,}[.]{1}[A-Za-z.]{2,6}$/;
       var pswcheck = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9@#$%^&*]{8,15}$/;

       if (usercheck.test(userid)) {
         document.getElementById('usererror').innerHTML = "";
       } else {
         document.getElementById('usererror').innerHTML = "**User id isinvalid";
         return false;
       }
       if (fnamecheck.test(fname)) {
         document.getElementById('fnameerror').innerHTML = "";
       } else {
         document.getElementById('fnameerror').innerHTML = "**Should not contain digits and special characters";
         return false;
       }
       if (emailcheck.test(email)) {
         document.getElementById('mail').innerHTML = "";
       } else {
         document.getElementById('mail').innerHTML = "**Email-id is invalid";
         return false;
       }
       if (pswcheck.test(psw)) {
         document.getElementById('pass').innerHTML = "";
       } else {
         document.getElementById('pass').innerHTML = "**Should not contain digits and special characters";
         return false;
       }
       if (psw.match(psw_repeat)) {
         document.getElementById('conpass').innerHTML = "";
       } else {
         document.getElementById('conpass').innerHTML = "**Password doesnot match";
         return false;
       }
     }

使用Javascript正则表达式进行表单验证？

2 个答案: