js 正则表达式

效果图

html 部分

    用户名：<input type="text" id="userName"/><span id="regName"></span><br/>
    密码：<input type="text" id="pwd"/><span id="regPwd"></span><br/>
    确定密码：<input type="text" id="ensurePwd"/><span id="regEnsurePwd"></span><br/>
    邮箱：<input type="text" id="mailbox"/><span id="regMailbox"></span><br/>
    手机号：<input type="text" id="num"/><span id="regNum"></span><br/>
    身份证号：<input type="text" id="number"/><span id="regNumber"></span><br/>
    地址：<input type="text" id="add"/><span id="regAdd"></span><br/>
    <input type="button" value="效验" onclick="reg()"/>

javascript 部分

function reg(){
  // 用户名
        var name = "";
        name = document.getElementById("userName").value;
	        var pattUserName = /^[A-Z]{1}\w{6,20}$/;
	        
	  //密码
	  var pwd = "";
	  pwd = document.getElementById("pwd").value;
	  var pattPwd = /^[A-Z]{1}[A-z0-9]{8,15}$/;
	  
	  //确定密码
	  var ensurePwd = "";
	  ensurePwd = document.getElementById("ensurePwd").value;
	  var pattEnsurePwd = /^[A-Z]{1}[A-z0-9]{8,15}$/;
	  
	  //邮箱
	  var mailbox = "";
	  mailbox = document.getElementById("mailbox").value;
	  var pattMailbox = /^[A-z0-9]+@[A-z0-9]+.com$/;
	  
	  //手机号
	  var num = "";
	  num = document.getElementById("num").value;
	  var pattNum = /^1[3-9]{1}\d{9}$/;
	  
	  //身份证号
	  var number = "";
	  number = document.getElementById("number").value;
	  var pattNumber = /^\d{18}|\d{17}(X|x)$/;
	  
	  //地址
	  var add = "";
	  add = document.getElementById("add").value;
	  var pattAdd = /^[\u4E00-\u9FA5][\u4e00-\u9fa5-A-z0-9]+$/;
	  
	  // 用户名
	  if(pattUserName.test(name)){
	       document.getElementById("regName").innerText ="正确";
	       document.getElementById("regName").style.color="green";
	            
	   }else{
	        document.getElementById("regName").innerText ="请输入大写字母开头6-20位字符";
	         document.getElementById("regName").style.color="red";
	     }

	  //密码
	  if(pattPwd.test(pwd)){
	      document.getElementById("regPwd").innerText ="正确";
	      document.getElementById("regPwd").style.color="green";
	  
	  }else{
	      document.getElementById("regPwd").innerText ="请输入大写开头数字字母符号混合8-15位";
	      document.getElementById("regPwd").style.color="red";
	  }
	  
	  //确定密码
	  if(pattEnsurePwd.test(ensurePwd) && ensurePwd == pwd){
	      document.getElementById("regEnsurePwd").innerText ="正确";
	      document.getElementById("regEnsurePwd").style.color="green";
	      
	  }else{
	      document.getElementById("regEnsurePwd").innerText ="请输入相同的密码";
	      document.getElementById("regEnsurePwd").style.color="red";
	  }
	  
	  //邮箱
	  if(pattMailbox.test(mailbox)){
	      document.getElementById("regMailbox").innerText ="正确";
	      document.getElementById("regMailbox").style.color="green";
	      
	  }else{
	      document.getElementById("regMailbox").innerText ="请输入正确的邮箱格式";
	      document.getElementById("regMailbox").style.color="red";
	  }
	  
	  //手机号
	  if(pattNum.test(num)){
	      document.getElementById("regNum").innerText ="正确";
	      document.getElementById("regNum").style.color="green";
	      
	  }else{
	      document.getElementById("regNum").innerText ="请输入正确的11手机号";
	      document.getElementById("regNum").style.color="red";
	  }
	  
	  //身份证号
	  if(pattNumber.test(number)){
	      document.getElementById("regNumber").innerText ="正确";
	      document.getElementById("regNumber").style.color="green";
	      
	  }else{
	      document.getElementById("regNumber").innerText ="请输入正确的18身份证号";
	      document.getElementById("regNumber").style.color="red";
	  }
	  
	  //地址
	  if(pattAdd.test(add)){
	      document.getElementById("regAdd").innerText ="正确";
	      document.getElementById("regAdd").style.color="green";
	      
	  }else{
	      document.getElementById("regAdd").innerText ="请输入正确的地址";
	      document.getElementById("regAdd").style.color="red";
	  }
	```