前端表单正则+失焦验证
HTML页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jq.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form action="https://www.baidu.com/" method="get"onsubmit="return fun()">
<div class="box">
<div class="form-group" style="width: 500px;">
<label for="name">用户名</label>
<input type="text" class="form-control" id="name"onblur="fun1()" placeholder="请输入用户名">
<p class="help-baock" style="color: red;" id="a"></p>
</div>
<div class="form-group" style="width: 500px;">
<label for="name">登录密码</label>
<input type="text" class="form-control" id="pas" placeholder="请输入登录密码"onblur="fun2()">
<p class="help-baock" style="color: red;" id="b"></p>
</div>
<div class="form-group" style="width: 500px;">
<label for="name">确认密码</label>
<input type="text" class="form-control" id="pasw"onblur="fun3()" placeholder="请输入确认密码">
<p class="help-baock" style="color: red;" id="c">请务必输入确认密码</p>
</div>
<div class="form-group" style="width: 500px;">
<label for="name">姓名</label>
<input type="text" class="form-control" id="namee"onblur="fun4()" placeholder="请输入姓名">
<p class="help-baock" style="color: red;" id="d">请务必输入姓名</p>
</div>
<div class="form-group" style="width: 500px;">
<label for="name">身份证</label>
<input type="text" class="form-control" id="shen" onblur="fun5()" placeholder="请输入身份证">
<p class="help-baock" style="color: red;" id="e">请务必输入身份证</p>
</div>
<div class="form-group" style="width: 500px;">
<label for="name">邮箱</label>
<input type="text" class="form-control" id="em" onblur="fun6()" placeholder="请输入邮箱">
<p class="help-baock" style="color: red;" id="f">请务必输入邮箱</p>
</div>
<div class="form-group" style="width: 500px;" >
<label for="name">手机号码</label>
<input type="text" class="form-control" id="phone" onblur="fun7()" placeholder="请输入手机号码">
<p class="help-baock" style="color: red;" id="g">请务必输入手机号码</p>
</div>
<input type="checkbox" name="" id="cc" value="1"/>我已阅读同意遵守规定<span id="q" style="color: red;">请先勾选同意事项</span>
<p><button type="submit" onclick="fun()">确认提交</button></p>
</div>
</form>
</body>
</html>
<script type="text/javascript">
function fun(){
if(fun1()&&fun2()&&fun3()&&fun4()&&fun5()&&fun6()&&fun7()&&fun8()){
return true
}else{
return false
}
}
function fun8(){
var value=$(':checkbox:checked').val();
if(value==1){
$('#q').html('')
return true
}else{
$('#q').html('<span id="q" style="color: red;">请先勾选同意事项</span>')
return false
}
}
function fun7(){
var aqq=$('#phone').val();
var aww=/^(13|15|17|19|18)\d{9}$/
var aee=aww.test(aqq)
if(aee==''){
$('#g').html('手机格式不正确_')
return false
}else{
$('#g').html('ok')
return true
}
}
//
//
function fun6(){
var aqq=$('#em').val();
var aww=/^\w+@(qq|QQ)\.(com|cn)$/
var aee=aww.test(aqq)
if(aee==''){
$('#f').html('(邮箱格式不正确_')
return false
}else{
$('#f').html('ok')
return true
}
}
//
function fun5(){
var aqq=$('#shen').val();
var aww=/(^\d{18}$)|([0-9]{17}[xX])$/
var aee=aww.test(aqq)
if(aee==''){
$('#e').html('18位纯数字或17位纯数字+X')
return false
}else{
$('#e').html('ok')
return true
}
}
//
function fun4(){
var aqq=$('#namee').val();
var aww=/^[\u4e00-\u9fa5]{2,3}$/
var aee=aww.test(aqq)
if(aee==''){
$('#d').html('2-3位汉字')
return false
}else{
$('#d').html('ok')
return true
}
}
//
function fun3(){
var aqq=$('#pas').val();
var aww=$('#pasw').val();
if(aww==aqq){
$('#c').html('两次密码相同')
return true
}else{
$('#c').html('两次密码不一致')
return false
}
}
//
function fun2(){
var aqq=$('#pas').val();
var aww=/^\w{6,20}$/
var aee=aww.test(aqq)
if(aee==''){
$('#b').html('6-20位字母，数字或符号')
return false
}else{
$('#b').html('ok')
return true
}
}
//
function fun1(){
var aqq=$('#name').val();
var aww=/^[0-9a-zA-Z_]{6,30}$/
var aee=aww.test(aqq)
if(aee==''){
$('#a').html('6-30位字母、数字或_')
return false
}else{
$('#a').html('ok')
return true
}
}
//
</script>
