js正则表达式登录验证,并添加表单

1.当每个输入框失去焦点后就做校验

2.只有所有正则表达式都通过验证才可以提交表单

话不多说 上图
在这里插入图片描述

1<form action=ke; onsubmit="return (trueName()+truePwd()+trueConfirmPwd()+trueEmail()+truePhone()+trueEID()+trueAddress())==7"> 2 <table align="center" border="1" style="border-collapse: collapse;"> 3 <tr> 4 <td>用户名:</td> 5 <td><input type="text" id="name" onblur="trueName()" /> 6 <span id="nameResult">大写字母开头 6-20位字符(不允许有符号但是允许有_)</span></td> 7 </tr> 8 <tr> 9 <td>密码:</td> 10 <td><input type="text" id="pwd" onblur="truePwd()" /> 11 <span id="pwdResult">大写开头 数字字母符号混合 8-15</span></td> 12 </tr> 13 <tr> 14 <td>确认密码:</td> 15 <td><input type="text" id="confirmPwd" onblur="trueConfirmPwd()" /> 16 <span id="confirmPwdResult">大写开头 数字字母符号混合 17 8-15</span></td> 18 </tr> 19 <tr> 20 <td>邮箱:</td> 21 <td><input type="text" id="email" onblur="trueEmail()" /> 22 <span id="emailResult">邮箱格式</span></td> 23 </tr> 24 <tr> 25 <td>手机号:</td> 26 <td><input type="text" id="phone" onblur="truePhone()" /> 27 <span id="phoneResult">手机号格式</span></td> 28 </tr> 29 <tr> 30 <td>身份证号:</td> 31 <td><input type="text" id="eID" onblur="trueEID()" /> 32 <span id="eIDResult">身份证号格式</span></td> 33 </tr> 34 <tr> 35 <td>地址:</td> 36 <td><input type="text" id="address" onblur="trueAddress()" /> 37 <span id="addressResult">中文开头 数字 - 字母 中文混合</span></td> 38 </tr> 39 <tr> 40 <td colspan="2" align="center" height="36px"><input type="submit" style="width: 8rem;height: 2rem;" value="提交" /></td> 41 </tr> 42 </table> 43</form> 44<script> 45 function trueName() { 46 //用户名校验 47 var trueName = document.getElementById("name").value; 48 var span = document.getElementById("nameResult"); 49 var name = /^[A-Z][0-9A-Za-z_][a-zA-Z0-9_]{5,19}$/; 50 if (!name.test(trueName)) { 51 span.getElementById("nameResult").innerHTML="DUI"; 52 span.style.color = "red"; 53 return false; 54 } else { 55 56 span.style.color = "green"; 57 return true; 58 } 59 } 60 61 62 function truePwd() { 63 //密码 64 var truePwd = document.getElementById("pwd").value; 65 var span = document.getElementById("pwdResult"); 66 var pwd = /^[A-Z][A-Za-z0-9]\w{7,14}.{1,20}$/; 67 if (!pwd.test(truePwd)) { 68 69 span.style.color = "red"; 70 return false; 71 } else { 72 span.style.color = "green"; 73 return true; 74 } 75 } 76 77 function trueConfirmPwd() { 78 //确认密码 79 var trueConfirmPwd = document.getElementById("confirmPwd").value; 80 var span = document.getElementById("confirmPwdResult"); 81 var confirmPwd = /^[A-Z][A-Za-z0-9]\w{7,14}.{1,20}$/; 82 if (!confirmPwd.test(trueConfirmPwd)) { 83 span.style.color = "red"; 84 return false; 85 } else { 86 span.style.color = "green"; 87 return true; 88 } 89 } 90 91 function trueEmail() { 92 //邮箱 93 var trueEmail = document.getElementById("email").value; 94 var span = document.getElementById("emailResult"); 95 var email = /^[A-z0-9]+@[a-z0-9]+.com$/; 96 if (!email.test(trueEmail)) { 97 span.style.color = "red"; 98 return false; 99 } else { 100 span.style.color = "green"; 101 return true; 102 } 103 } 104 105 function truePhone() { 106 //手机号 107 var truePhone = document.getElementById("phone").value; 108 var span = document.getElementById("phoneResult"); 109 var phone = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/ 110 if (!phone.test(truePhone)) { 111 span.style.color = "red"; 112 return false; 113 } else { 114 span.style.color = "green"; 115 return true; 116 } 117 } 118 119 function trueEID() { 120 //身份证号 121 var trueEID = document.getElementById("eID").value; 122 var span = document.getElementById("eIDResult"); 123 var eID = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 124 if (!eID.test(trueEID)) { 125 span.style.color = "red"; 126 return false; 127 } else { 128 span.style.color = "green"; 129 return true; 130 } 131 } 132 133 function trueAddress() { 134 //地址 135 var trueAddress = document.getElementById("address").value; 136 var span = document.getElementById("addressResult"); 137 var address = /^[\u4E00-\u9FA50-9A-Za-z\u4E00-\u9FA5]+$/; 138 if (!address.test(trueAddress)) { 139 span.style.color = "red"; 140 return false; 141 } else { 142 span.style.color = "green"; 143 return true; 144 } 145 } 146 function ke() { 147 148 } 149</script> 150</body> 151</html> 152 153

前面我们加了判断 若都正确即可以正常跳转至其他网页

在这里插入图片描述

代码交流 2021