Fatal编程技术网
  • javascript/
  • 使用Javascript正则表达式进行表单验证？

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

javascript html bootstrap-4

使用Javascript正则表达式进行表单验证？,javascript,html,bootstrap-4,Javascript,Html,Bootstrap 4,我正在创建一个注册表单，其中包含用户名、姓名、电子邮件、密码、确认密码和从属关系。这些字段使用javascript中的正则表达式进行验证。我希望在表单中显示错误，我正在使用span标记来实现这一点。我不知道我错在哪里，因为它没有被验证 函数验证（）{ var userid=document.getElementById（'userid'）。值； var fname=document.getElementById（'fname'）.value； var lname=document.getEle

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

函数验证（）{
var userid=document.getElementById（'userid'）。值；
var fname=document.getElementById（'fname'）.value；
var lname=document.getElementById（'lname'）.value；
var email=document.getElementById（'email'）。值；
var psw=document.getElementById（'psw'）。值；
var psw_repeat=document.getElementById（'psw_repeat'）。值；
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}$/；
变量pswcheck=/^（？=.[0-9]）（？=.[！@$%^&*]）[a-zA-Z0-9@$%^&*]{8,15}$/；
if（usercheck.test（userid））{
document.getElementById（'usererror'）。innerHTML=“”；
}否则{
document.getElementById（'usererror'）。innerHTML=“**用户id无效”；
返回false；
}
if（fname检查测试（fname））{
document.getElementById（'fnameerror'）。innerHTML=“”；
}否则{
document.getElementById（'fnameerror'）。innerHTML=“**不应包含数字和特殊字符”；
返回false；
}
if（emailcheck.test（email））{
document.getElementById（'mail'）.innerHTML=“”；
}否则{
document.getElementById（'mail'）.innerHTML=“**电子邮件id无效”；
返回false；
}
if（pswcheck.test（psw））{
document.getElementById（'pass'）.innerHTML=“”；
}否则{
document.getElementById（'pass'）.innerHTML=“**不应包含数字和特殊字符”；
返回false；
}
如果（psw.匹配（psw_重复））{
document.getElementById（'conpass'）.innerHTML=“”；
}否则{
document.getElementById（'conpass'）.innerHTML=“**密码不匹配”；
返回false；
}
}

创建帐户
用户id
名字
电子邮件id
密码
确认密码
附属
校友
教员学生
登记
取消
lname此字段在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;
       }
     }


创建帐户
用户id
名字
电子邮件id
密码
确认密码
附属
校友
官能
学生
登记
取消
//脚本文件
函数验证（）{
var userid=document.getElementById（'userid'）。值；
var fname=document.getElementById（'fname'）.value；
//var lname=document.getElementById（'lname'）.value；
var email=document.getElementById（'email'）。值；
var psw=document.getElementById（'psw'）。值；
var psw_repeat=document.getElementById（'psw_repeat'）。值；
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}$/；
变量pswcheck=/^（？=.[0-9]）（？=.[！@$%^&*]）[a-zA-Z0-9@$%^&*]{8,15}$/；
if（usercheck.test（userid））{
document.getElementById（'usererror'）。innerHTML=“”；
}否则{
document.getElementById（'usererror'）.innerHTML=“**用户id isinvalid”；
返回false；
}
if（fname检查测试（fname））{
document.getElementById（'fnameerror'）。innerHTML=“”；
}否则{
document.getElementById（'fnameerror'）。innerHTML=“**不应包含数字和特殊字符”；
返回false；
}
if（emailcheck.test（email））{
document.getElementById（'mail'）.innerHTML=“”；
}否则{
document.getElementById（'mail'）.innerHTML=“**电子邮件id无效”；
返回false；
}
if（pswcheck.test（psw））{
document.getElementById（'pass'）.innerHTML=“”；
}否则{
document.getElementById（'pass'）.innerHTML=“**不应包含数字和特殊字符”；
返回false；
}
如果（psw.匹配（psw_重复））{
document.getElementById（'conpass'）.innerHTML=“”；
}否则{
document.getElementById（'conpass'）.innerHTML=“**密码不匹配”；
返回false；
}
}

#lname
不存在，因此
文档.getElementById（'lname'）
为
null
；试图查找
.value
，这会破坏您的函数