js中用正则表达式验证用户注册信息

r囧r小猫 2022-05-12 04:50 186阅读 0赞

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Insert title here</title>  
<script type="text/javascript">  
function check() \{  
var submitFlg = true;  
//验证姓名  
var regpname=\{regstr:/^\[\\u4e00-\\u9fa5\\w\]\{1,6\}$/,tip:'请输入1-6位的汉字、英文、数字、下划线'\};  
var pname= document.getElementById("pname").value;  
var spans = document.getElementById("pname").parentNode.getElementsByTagName("span");  
spans\[0\].innerHTML=""  
if(!regpname.regstr.test(pname))\{  
spans\[0\].innerHTML="<font color='red'>"+regpname.tip+"<font>";  
submitFlg = false;  
\}  
//验证用户名  
var regusername=\{regstr:/^\[\\w\]\{1,6\}$/,tip:'请输入1-6位的英文、数字、下划线'\};  
var username= document.getElementById("username").value;  
var spans = document.getElementById("username").parentNode.getElementsByTagName("span");  
spans\[0\].innerHTML="";  
if(!regusername.regstr.test(username))\{  
spans\[0\].innerHTML="<font color='red'>"+regusername.tip+"<font>";  
submitFlg = false;  
\}  
  
//验证密码  
var regpassword=\{regstr:/^\[\\w@\#\*\]\{1,6\}$/,tip:'请输入1-6位的英文、数字、下划线、@、\#、\*'\};  
var password= document.getElementById("password").value;  
var spans = document.getElementById("password").parentNode.getElementsByTagName("span");  
spans\[0\].innerHTML="";  
if(!regpassword.regstr.test(password))\{  
spans\[0\].innerHTML="<font color='red'>"+regpassword.tip+"<font>";  
submitFlg = false;  
\}  
  
var repassword=document.getElementById("repassword").value;  
var spans = document.getElementById("repassword").parentNode.getElementsByTagName("span");  
spans\[0\].innerHTML="";  
if(repassword!=password)\{  
spans\[0\].innerHTML="<font color='red'>"+"两次输入的密码不一致"+"<font>";  
submitFlg = false;  
\}  
  
//验证邮箱  
var regemail=\{regstr:/^\\w+(\[-+.\]\\w+)\*@\\w+(\[-.\]\\w+)\*\\.\\w+(\[-.\]\\w+)\*$/,tip:'请确认邮箱格式'\};  
var email= document.getElementById("email").value;  
var spans = document.getElementById("email").parentNode.getElementsByTagName("span");  
spans\[0\].innerHTML="";  
if(!regemail.regstr.test(email))\{  
spans\[0\].innerHTML="<font color='red'>"+regemail.tip+"<font>";  
submitFlg = false;  
\}  
  
//验证邮箱  
var regemail=\{regstr:/^\\w+(\[-+.\]\\w+)\*@\\w+(\[-.\]\\w+)\*\\.\\w+(\[-.\]\\w+)\*$/,tip:'请确认邮箱格式'\};  
var email= document.getElementById("email").value;  
var spans = document.getElementById("email").parentNode.getElementsByTagName("span");  
spans\[0\].innerHTML="";  
if(!regemail.regstr.test(email))\{  
spans\[0\].innerHTML="<font color='red'>"+regemail.tip+"<font>";  
submitFlg = false;  
\}  
//验证电话  
var regphone=\{regstr:/^1\\d\{10\}$/,tip:'请输入11位的手机号'\};  
var phone= document.getElementById("phone").value;  
var spans = document.getElementById("phone").parentNode.getElementsByTagName("span");  
spans\[0\].innerHTML="";  
if(!regphone.regstr.test(phone))\{  
spans\[0\].innerHTML="<font color='red'>"+regphone.tip+"<font>";  
submitFlg = false;  
\}  
return submitFlg;  
\}  
</script>  
</head>  
<body>  
<form action="success.html" οnsubmit="return check()">  
<table>  
<tr>  
<td><font color="red">\*</font>姓名</td>  
<td><input type="text" id="pname" name="pname"></input><span></span></td>  
</tr>  
<tr>  
<td><font color="red">\*</font>用户名</td>  
<td><input type="text" id="username" name="username"></input><span></span></td>  
</tr>  
<tr>  
<td><font color="red">\*</font>密码</td>  
<td><input type="text" id="password" name="password"></input><span></span></td>  
</tr>  
<tr>  
<td><font color="red">\*</font>确认密码</td>  
<td><input type="text" id="repassword" name="repassword"></input><span></span></td>  
</tr>  
<tr>  
<td>邮箱</td>  
<td><input type="text" id="email" name="email"></input><span></span></td>  
</tr>  
<tr>  
<td>性别</td>  
<td>  
<input type="radio" id="sex" name="sex" value="1">男   
<input type="radio" id="sex" name="sex" value="2">女  
</td>  
</tr>  
<tr>  
<td>电话</td>  
<td><input type="text" id="phone" name="phone"></input><span></span></td>  
</tr>  
<tr>  
<td>地区</td>  
<td>  
<select name = "area">  
<option value="1">长春</option>  
<option value="2">吉林</option>  
</select>  
</td>  
</tr>  
</table>  
<input type="submit" value="注册">  
</form>  
</body>

</html>

还需在相同目录下新建一个success.html文件，用来显示form提交后跳转的页面。