JavaScript正则表单验证(⽤户名、密码、确认密码、⼿机号、
座机号、⾝份证号)
1、关于JavaScript表单验证,如果使⽤双向绑定的前端js框架,会更容易的多。但是博主还是建议⼤家不要脱离源⽣js本⾝。因为源⽣js才是王道。
注意:
  a、代码中的错误提⽰可能会没有,在代码中到 “错误.jpg”  图⽚,⾃⼰制作⼀个
  b、验证的判断已经完成,只需要根据⾃⼰的验证规则进⾏表单验证,更换⾃⼰的正则表达式。
  c、博主将错误提⽰图⽚插⼊本⽂档中。需要更名为  “错误.jpg”,放到与html根⽬录下⽅可使⽤。
  (错误提⽰图⽚)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1">
<form action="正则验证⼿机号.html" name="form1" method="post" onsubmit="return test()">
<tr>
<td align="right">⽤户名:</td>
正则匹配手机号码
<td><input type="text" name="username"></td>
<td><span id="namemsg">*</span></td>
</tr>
<tr>
<td align="right">密码:</td>
<td><input type="password" name="pwd"></td>
<td><span id="pwdmsg">*</span></td>
</tr>
<tr>
<td align="right">确认密码:</td>
<td><input type="password" name="pwd1"></td>
<td><span id="pwd1msg">*</span></td>
</tr>
<tr>
<td align="right">⼿机号:</td>
<td><input type="text" name="phone"></td>
<td><span id="iphone1">*</span></td>
</tr>
<tr>
<td align="right">座机号:</td>
<td><input type="text" name="phone1"></td>
<td><span id="iphone2">*</span></td>
</tr>
<tr>
<td align="right">⾝份证号:</td>
<td><input type="text" name="sfzid"></td>
<td><span id="sfzmsg">*</span></td>
</tr>
<tr>
<td colspan="3">
<input type="submit" name="sub" value="注册">
<input type="reset" name="ret" value="重置" onclick="test1()">
</td>
</tr>
</form>
</table>
<script type="text/javascript">
//⽤户名验证
document.keyup=function(){
var reg=/^[a-zA-Z]{1}[A-Z|a-z|0-9]{5,29}/;
st(this.value)&&this.value.length>=6&&this.value.length<=30){
}else{
}
}
//密码验证
document.keyup=function(){
var reg1=/[A-Za-z]+[0-9]+/;
st(this.value)&&this.value.length>=6&&this.value.length<=8){
}else{
}
//确认密码
document.keyup=function(){
if(this.value==document.form1.pwd.value&&this.value!=""){
}else{
}
//⼿机号验证
document.keyup=function(){
var reg2=/^(13|14|15|17|18)[0-9]{9}/;
st(this.value)&&this.value.length==11){
}else{
}
/
/座机号验证
document.keyup=function(){
var reg3=/^[0-9]{3,4}(\-{1})[0-9]{7,8}/;
st(this.value)&&this.value.length==13||this.value.length==12){
}else{
}
//⾝份证号验证
document.keyup=function(){
var reg4=/^\d{17}[(0-9)|X|x ]{1}/;
st(this.value)&&this.value.length==18){
}else{
}
//注册按钮⽅法
function test(){
var str="输⼊正确"
ElementById("namemsg").innerHTML!==str){
document.form1.username.value="";
return false;
}
ElementById("pwdmsg").innerHTML!==str){
document.form1.pwd.value="";
return false;
}
ElementById("pwd1msg").innerHTML!==str){
document.form1.pwd1.value="";
return false;
}
ElementById("iphone1").innerHTML!==str){
document.form1.phone.value="";
return false;
}
ElementById("iphone2").innerHTML!==str){
document.form1.phone.value="";
return false;
}
}
</script>
</body>
</html>

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。