表单 用jquery做输入脱离焦点 进行正则验证
<!-- 账号登录块 -->
<form class="form1" action="" method="get" onsubmit="return sub();">
<label></label>
<input class="user-name user" type="text" placeholder="邮箱/手机号码/小米ID">
<input class="user-name mima" type="password" name="" id="" value="" placeholder="密码">
<div class="clear"></div>
<p class="alert at1">
<span>!</span>
账号格式不正确
</p>
<p class="alert at2">
<span>!</span>
密码格式不正确
</p>
<input class="loading" type="submit" id="" name="" value="登录" />
</form>
<!-- 手机短信登录注册快 -->
<form class="form2" action="" method="get">
<label class="lb1">+86</label>
<input class="user-name phone" type="text" placeholder="手机号码">
<input class="user-name yzm" type="password" name="" id="" value="" placeholder="短信验证码"><label class="lb2">获取验证码</label>
<div class="clear"></div>
<p class="alert at3">
<span>!</span>
手机号格式不正确
</p>
<p class="alert at4">
<span>!</span>
短信验证码不正确
</p>
<input class="loading" type="submit" id="" name="" value="立即登录/注册" />
</form>
// 用户名验证
$(".user").focus(function(){
$(".user").css("background-color","#FFFFCC");
});
$(".alert").hide();
$(".user").blur(function(){
var n = $(".user").eq(0).val();
if(!isMobil(n)){
if(!isMail(n))
{
if (!isTrueName(n)) {
$(".at1").show();
$(".user").eq(0).css("border-color","red");
} else{
$(".alert").hide();
$(".user").eq(0).css("border-color"," #ABADB3");
}
}else{
$(".alert").hide();
$(".user").eq(0).css("border-color"," #ABADB3");
}
}else{
$(".alert").hide();
$(".user").eq(0).css("border-color"," #ABADB3");
}
});
// 密码验证
$(".mima").focus(function(){
$(".mima").css("background-color","#FFFFCC");
});
$(".alert").hide();
$(".mima").blur(function(){
var m = $(".mima").eq(0).val();
if(!isPasswd(m)){
$(".at2").show();
$(".mima").eq(0).css("border-color","red");
}else{
$(".alert").hide();
$(".mima").eq(0).css("border-color"," #ABADB3");
}
});
//手机格式验证
$(".phone").focus(function(){
$(".phone").css("background-color","#FFFFCC");
});
$(".alert").hide();
$(".phone").blur(function(){
var p = $(".phone").eq(0).val();
if(!isMobil(p)){
$(".at3").show();
$(".phone").eq(0).css("border-color","red");
}else{
$(".alert").hide();
$(".phone").eq(0).css("border-color"," #ABADB3");
}
});
//验证码
$(".yzm").focus(function(){
$(".yzm").css("background-color","#FFFFCC");
});
$(".alert").hide();
$(".yzm").blur(function(){
var y = $(".yzm").eq(0).val();
if(!isyzm(y)){
$(".at4").show();
$(".yzm").eq(0).css("border-color","red");
}else{
$(".alert").hide();
$(".yzm").eq(0).css("border-color"," #ABADB3");
}
});
});
验证函数
/* 校验手机号 */
function isMobil(s)
{
var patrn=/^1(3|4|5|7|8)\d{9}$/;
if (!patrn.exec(s)) {return false}
else{return true}
}
/*邮箱验证*/
function isMail(s)
{
var patrn=/^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$/;
if (!patrn.exec(s)) {return false}
else{return true}
}
/* 校验用户名 */
function isTrueName(s)
{
var patrn=/^[a-zA-Z]{4,8}$/;
if (!patrn.exec(s)) {return false}
else{return true}
}
//校验密码:只能输入6-20个字母、数字、下划线
function isPasswd(s)
{
var patrn=/^(\w){6,20}$/;
if (!patrn.exec(s)) {return false}
else{return true}
}
/* 校验手机号 */
function isyzm(s)
{
var patrn=/^\d{5}$/;
if (!patrn.exec(s)) {return false}
else{return true}
}