效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单正则表达式验证</title>
<style type="text/css">
.msg{color: red;}
</style>
</head>
<body>
<form action='http://www.jd.com' method='post' onsubmit='return checkInfo(this)'>
name*<input type='text' name='uname'
id='uname' onblur='checkUname(this)'/>
<span id='erruname' class='msg'>*</span><br/>
password*<input type='password' name='pwd1' id='pwd1'/>
<span id='errpwd1' class='msg'>*</span><br/>
repassword*<input type='password' name='pwd2' id='pwd2'/>
<span id='errpwd2' class='msg'>*</span><br/>
phone*<input type='text' name='phone' id='phone'/>
<span id='errphone' class='msg'>*</span><br/>
email*<input type='text' name='email' id='email'/>
<span id='erremail' class='msg'>*</span><br/>
<input type='submit' value='提交'/>
<input type='reset' vallue='重置'/>
</form>
<script type='text/javascript'>
/* 失去焦点 验证用户名是否为空 */
function checkUname(obj){
/* 获得表单中用户的名字用value */
var uname=obj.value;
var erruname=document.getElementById('erruname')
if(uname.length==0){
erruname.innerHTML='用户名不能为空';
}else{
erruname.innerHTML='';
}
}
function checkInfo(f1){
/* 验证名字 获取表单内容为表单内容.value/表单元素可以通过表单对象点name调用
非表单内容.innerHTML/非表单元素只能通过id或者class来查找*/
var uname=f1.uname.value;
var erruname=document.getElementById('erruname')
if(uname.length==0){
erruname.innerHTML='用户名不能为空';
}else{
erruname.innerHTML='';
}
/* 密码强度正则 最少6位 包括一个大写字母一个小写字母 一个数字 一个特殊字符*/
var reg_pwd=/^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
var pwd1=f1.pwd1.value
var pwd2=f1.pwd2.value
var errpwd1=document.getElementById('errpwd1')
var errpwd2=document.getElementById('errpwd2')
if(pwd1.length==0 || reg_pwd.test(pwd1)==false){
errpwd1.innerHTML='密码强度不够';
return false;
}else{
errpwd1.innerHTML='正确';
}
if(pwd1!=pwd2){
errpwd2.innerHTML='两次密码不同';
return false;
}else{
errpwd2.innerHTML='正确';
}
/* 手机号码验证 通过正则表达式验证手机号码格式是否符合规则*/
var regphone=/^[1][3,4,5,7,8][0-9]{9}$/;
console.log(regphone.test('18511403205'));
var phone=f1.phone.value;
var errphone=document.getElementById('errphone');
if(regphone.test(phone)==false){
errphone.innerHTML='手机格式错误';
return false;
}else{
errphone.innerHTML='正确';
}
/* 验证邮箱 通过正则表达式来验证邮箱是否符合规则*/
var regemail=/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var email=f1.email.value;
var erremail=document.getElementById('erremail');
if(regemail.test(email)==false){
erremail.innerHTML='邮箱格式错误';
return false;
}else{
erremail.innerHTML='正确';
}
return true;
}
</script>
</body>
</html>
提交之后跳转的页面
网友评论