java 前端--Jquery表单验证
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery正则验证</title> <link type="text/css" rel="stylesheet" href="css/2.jQuery正则验证.css"/> </head> <body> <form action="#" method="post"> <table> <tr> <td>用户名:</td> <td><input type="text" name="uname"/><span></span></td> </tr> <tr> <td>密码:</td> <td><input type="password" name="pwd"/><span></span></td> </tr> <tr> <td>手机:</td> <td><input type="text" name="phone"/><span></span></td> </tr> <tr> <td>邮箱:</td> <td><input type="text" name="email"/><span></span></td> </tr> <tr> <td>身份证:</td> <td><input type="text" name="cardno"/><span></span></td> </tr> <tr> <td><input type="submit" value="提交"/></td> <td><input type="reset" value="重置"/></td> </tr> </table> </form> </body> </html> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/2.jQuery正则验证.js"></script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*获取焦点给提示规则 ,边框黄色 失去焦点验证给相应提示,边框绿色
1.用户名:规则:数组字母组成,但是不能以数字开头的6到10位
2.密码:规则:数字字母特殊字符(!@#¥%&*)组成,但是不能以特殊字符开头的6-16位
3.手机:规则:13,15,,17,18开头的11位手机号码
4.邮箱:
规则:
数字字母下划线@数字字母下划线.com
数字字母下划线@数字字母下划线.cn
数字字母下划线@数字字母下划线.com.cn
5.身份证:18位身份证号:前6位随机数字,中间8位出生年月 后4位编号 */
$(function(){
//1.用户名获取焦点和失去焦点
funUname();
//2.密码获取焦点和失去焦点
funPwd();
//3.手机获取焦点和失去焦点
funPhone();
//4.邮箱获取焦点和失去焦点
funEmail();
//5.身份证获取焦点和失去焦点
funcardno();
});
//1.用户名获取焦点和失去焦点
function funUname(){
//获取焦点
$("[name=uname]").focus(function(){
$(this).next().html("请输入由数字字母组成,但是不能以数字开头的6位用户名!");
$(this).next().removeClass().addClass("one");
});
//失去焦点
$("[name=uname]").blur(function(){
var uname=$("[name=uname]").val();
var unameReg=/^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
if(unameReg.test(uname)){
$(this).next().html("输入正确!");
$(this).next().removeClass().addClass("two");
} else{
$(this).next().html("输入错误,用户名由6位数组字母组成,但是不能以数字开头!");
$(this).next().removeClass().addClass("three");
}
});
}
//2.密码获取焦点和失去焦点
function funPwd(){
//获取焦点
$("[name=pwd]").focus(function(){
$(this).next().html("请输入密码由数字字母特殊字符(!@#¥%&*)组成,但是不能以特殊字符开头的6-16位!");
$(this).next().removeClass().addClass("one");
});
//失去焦点
$("[name=pwd]").blur(function(){
var pwd=$("[name=pwd]").val();
var pwdReg=/^[a-zA-Z0-9][a-zA-Z0-9!@#¥%&*]{5,15}$/;
if(pwdReg.test(pwd)){
$(this).next().html("输入正确!");
$(this).next().removeClass().addClass("two");
} else{
$(this).next().html("输入错误,密码由数字字母特殊字符(!@#¥%&*)组成,但是不能以特殊字符开头的6-16位!");
$(this).next().removeClass().addClass("three");
}
});
}
//3.手机获取焦点和失去焦点
function funPhone(){
//获取焦点
$("[name=phone]").focus(function(){
$(this).next().html("请输入手机由13,15,,17,18开头的11位手机号码!");
$(this).next().removeClass().addClass("one");
});
//失去焦点
$("[name=phone]").blur(function(){
var phone=$("[name=phone]").val();
var phoneReg=/^(13|15|17|18)\d{9}$/;
if(phoneReg.test(phone)){
$(this).next().html("输入正确!");
$(this).next().removeClass().addClass("two");
} else{
$(this).next().html("输入错误手机由13,15,17,18开头的11位手机号码!!");
$(this).next().removeClass().addClass("three");
}
});
}
//4.邮箱获取焦点和失去焦点
function funEmail(){
//获取焦点
$("[name=email]").focus(function(){
$(this).next().html("请输入邮箱格式如下:holly@qq.com 或 holly@sina.com.cn 或 holly@sina.cn");
$(this).next().removeClass().addClass("one");
});
//失去焦点
$("[name=email]").blur(function(){
var email=$("[name=email]").val();
var emailReg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
if(emailReg.test(email)){
$(this).next().html("输入正确!");
$(this).next().removeClass().addClass("two");
} else{
$(this).next().html("输入错误邮箱格式如下:holly@qq.com 或 holly@sina.com.cn 或 holly@sina.cn!!");
$(this).next().removeClass().addClass("three");
}
});
}
//5.身份证获取焦点和失去焦点
function funcardno(){
//获取焦点
$("[name=cardno]").focus(function(){
$(this).next().html("请输入身份证由18位身份证号:前6位随机数字,中间8位出生年月 后4位编号");
$(this).next().removeClass().addClass("one");
});
//失去焦点
$("[name=cardno]").blur(function(){
var cardno=$("[name=cardno]").val();
var cardnoReg=/^\d{6}(19|20)\d{2}(0?[1-9]|1[0-2])(0?[1-9]|[1-2]\d|3[0-1])\d{4}$/;
if(cardnoReg.test(cardno)){
$(this).next().html("输入正确!");
$(this).next().removeClass().addClass("two");
} else{
$(this).next().html("输入错身份证由18位身份证号:前6位随机数字,中间8位出生年月 后4位编号!");
$(this).next().removeClass().addClass("three");
}
});
}