1、插件代码，话不多说，直接贴代码
? ? ??
var show_div_name = "show_validate_div"; //提示信息显示div
var show_div_parent_tag = 'tr';
$(document).ready(function(){
$('input').focus(function(){
var show_div_node = $(this).parents(show_div_parent_tag).find('.' + show_div_name);
var input_val = $(this).val();
var objItem = $(this);
if(input_val=='' || input_val==null){
console.info("这是info");
showMessage(objItem.attr('default'),show_div_node,false);
}
show_div_node.show();
}).blur(function(){
var show_div_node = $(this).parents(show_div_parent_tag).find('.' + show_div_name);
var input_val = $(this).val();
var isError = false;
var objItem = $(this);
var validArr = validate(objItem, input_val, show_div_node);
isError = validArr['isCheck'];
var isAjax = validArr['isAjax'];
var isCard = validArr['isCard'];
if (isError && isAjax==false && isCard==false) {
showMessage('格式正确', show_div_node, false);
}
});
$("form").submit(function(){
var isSubmit = true;
$(this).find("input").each(function(){
var input_val = $(this).val();
var objItem = $(this);
var show_div_node = $(this).parents(show_div_parent_tag).find('.' + show_div_name);
show_div_node.show();
var validArr = validate(objItem, input_val, show_div_node);
var isValidate = validArr['isCheck'];
if(isValidate==false){
isSubmit = isValidate;
}
});
return isSubmit;
});
});
/**
* 验证属性介绍
* 1、require，为空验证，取值 true Or false
* 2、min或max，长度最小或最大值验证，可以只有一个属性或两个同时有
* 3、reg,正则匹配，
* a、如果reg值是num(整数)、tel(电话或座机)、card(身份证)、chinese(中文)、email(邮箱)、qq(qq)，
* 其中一种，按对应系统提供的正则表达式匹配。
* b、如果reg值是一个正则表达式，按提供的正则匹配。
* c、reg属性对应一个regMsg属性，regMsg属性可有可无。如果有，reg验证出错，就会显示regMsg内容，如果没有，出错显示系统默认提示。
* 4、url,ajax远程验证属性，默认按照input框属性name名字提交到后台，后台可以根据改名字，获取input输入内容，进行验证。
* 验证过后需要返回json格式数据，包括两个属性，error(1、验证错误。0、验证成功),msg（验证成功或错误的提示信息）
*/
function validate(objItem,inputVal,showDivNode){
var isCheck = true;
var isAjax = false;
var isCard = false;
var validArr = new Array();
if(isExistNode(objItem,"require")){
isAjax = false;
isCard = false;
var requireVal = objItem.attr('require');
if(requireVal=='false' && (inputVal=='' || inputVal==null)){
showDivNode.hide();
return true;
}
isCheck = checkNull(requireVal,inputVal,showDivNode);
}
if(isExistNode(objItem,"min") && isCheck==true){
isAjax = false;
isCard = false;
var min = objItem.attr("min");
isCheck = checkLength(min,0,inputVal,showDivNode);
}
if(isExistNode(objItem,"max") && isCheck==true){
isAjax = false;
isCard = false;
var max = objItem.attr("max");
isCheck = checkLength(0,max,inputVal,showDivNode);
}
if (isExistNode(objItem,"reg") && isCheck == true) {
isAjax = false;
var regMsg = false;
if(isExistNode(objItem,"regMsg")){
regMsg = objItem.attr("regMsg");
}
var regStr = objItem.attr("reg");
if(regStr == 'card'){
isCard = true;
var reArr = checkCard(inputVal,showDivNode,regMsg);
if(reArr['error'] == true){
isCheck = false;
}
}else{
isCard = false;
isCheck = checkReg(regStr,inputVal,showDivNode,regMsg);
}
}
if (isExistNode(objItem,"url") && isCheck == true) {
isAjax = true;
isCard = false;
var ajax_url = objItem.attr("url");
var inputName = objItem.attr("name");
ajax_url += "?"+inputName+"="+inputVal;
isCheck = ajaxVlidate(ajax_url,showDivNode);
}
validArr['isCheck'] = isCheck;
validArr['isAjax'] = isAjax;
validArr['isCard'] = isCard;
return validArr;
}
//空验证
function checkNull(requireVal,inputVal,showDivNode){
var isCheck = true;
if(requireVal == 'true' && (inputVal=='' || inputVal==null)){
isCheck = false;
showMessage('不能为空',showDivNode,true);
}
return isCheck;
}
//长度验证
function checkLength(min,max,inputVal,showDivNode){
var isCheck = true;
if(inputVal.length<min && min!=0){
isCheck = false;
showMessage('至少'+min+'字',showDivNode,true);
}else if(inputVal.length>max && max!=0){
isCheck = false;
showMessage('至多'+max+'字',showDivNode,true);
}
return isCheck;
}
//正则验证
function checkReg(regStr,inputVal,showDivNode,regMsg){
var isCheck = true;
var reArr = getRegExp(regStr,regMsg);
var regExp = reArr['reExp'];
var errorMsg = reArr['errrMsg'];
if(!regExp.test(inputVal)){
isCheck = false;
showMessage(errorMsg,showDivNode,true);
}
return isCheck;
}
function getRegExp(regStr,regMsg){
var reExp = '';
var errrMsg = '';
if(regStr == 'email'){
reExp = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; //邮箱
errrMsg = '请输入正确邮箱';
}else if(regStr == 'num'){
reExp = /^\d+$/;
errrMsg = '只能输入整数';
}else if(regStr == 'tel'){
reExp = /^([0-9]{11})?$/;
errrMsg = '请输入正确手机号';
}else if(regStr == 'chinese'){
reExp = /[\u4E00-\u9FA5\uF900-\uFA2D]/;
errrMsg = '只能输入中文';
}else if(regStr == 'qq'){
reExp = /'^[0-9]{4,12}/;
errrMsg = '请输入正确的qq号码';
}else{
reExp = new RegExp(regStr);
errrMsg = '不符合正则规则';
}
if(regMsg!=false){
errrMsg = regMsg;
}
var reArr = new Array();
reArr['reExp'] = reExp;
reArr['errrMsg'] = errrMsg;
return reArr;
}
//ajax验证
function ajaxVlidate(url,showDivNode){
var isCheck = true;
var reArr = new Array();
$.ajax({
type: 'GET',
url: url,
async:false, //同步
dataType: "json",
success: function(data){
reArr['error'] = data.error;
reArr['msg'] = data.msg;
}
});
if(reArr['error']=='1'){
isCheck = false;
showMessage(reArr['msg'],showDivNode,true);
}else{
isCheck = true;
showMessage(reArr['msg'],showDivNode,false);
}
return isCheck;
}
//错误处理
function showMessage(message,showDivNode,isError){
if(isError){
showDivNode.html(message);
showDivNode.css('color','red');
return;
}
showDivNode.html(message);
showDivNode.css('color','green');
}
function isExistNode(objItem,nodeName){
return typeof(objItem.attr(nodeName))!="undefined";
}
//验证身份证号
function checkCard(idcard,showDivNode,regMsg){
var Errors=new Array("验证通过!","身份证号码位数不对!","身份证号码出生日期超出范围或含有非法字符!","身份证号码校验错误!","身份证地区非法!");
var area={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"xinjiang",71:"台湾",81:"香港",82:"澳门",91:"国外"}
var idcard,Y,JYM;
var S,M;
var idcard_array = new Array();
idcard_array = idcard.split("");
if(area[parseInt(idcard.substr(0,2))]==null){
error = true;
msg = Errors[4];
};
var reArr = new Array();
var error = false;
var msg = '';
switch(idcard.length){
case 15:
if ((parseInt(idcard.substr(6,2))+1900) % 4 == 0 || ((parseInt(idcard.substr(6,2))+1900) % 100 == 0 && (parseInt(idcard.substr(6,2))+1900) % 4 == 0 )){
ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/;//测试出生日期的合法性
}
else{
ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/;//测试出生日期的合法性
}
if(ereg.test(idcard)){
error = false;
msg = Errors[0];
}else{
error = true;
msg = Errors[2];
}
break;
case 18:
if( parseInt(idcard.substr(6,4)) % 4 == 0 || ( parseInt(idcard.substr(6,4)) % 100 == 0 && parseInt(idcard.substr(6,4))%4 == 0 )){
ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/;//闰年出生日期的合法性正则表达式
}
else{
ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/;//平年出生日期的合法性正则表达式
}
if(ereg.test(idcard)){
S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10])) * 7 + (parseInt(idcard_array[1]) + parseInt(idcard_array[11])) * 9 + (parseInt(idcard_array[2]) + parseInt(idcard_array[12])) * 10 + (parseInt(idcard_array[3]) + parseInt(idcard_array[13])) * 5 + (parseInt(idcard_array[4]) + parseInt(idcard_array[14])) * 8 + (parseInt(idcard_array[5]) + parseInt(idcard_array[15])) * 4 + (parseInt(idcard_array[6]) + parseInt(idcard_array[16])) * 2 + parseInt(idcard_array[7]) * 1 + parseInt(idcard_array[8]) * 6 + parseInt(idcard_array[9]) * 3 ;
Y = S % 11;
M = "F";
JYM = "10X98765432";
M = JYM.substr(Y,1);
if(M == idcard_array[17]){
error = false;
msg = Errors[0];
}else{
error = true;
msg = Errors[3];
}
}else{
error = true;
msg = Errors[2];
}
break;
default:
error = true;
msg = Errors[1];
break;
}
reArr['error'] = error;
reArr['msg'] = msg;
if(regMsg!=false && reArr['error']==true){
reArr['msg'] = regMsg;
}
if(reArr['error']=='1'){
showMessage(reArr['msg'],showDivNode,true);
}else{
showMessage(reArr['msg'],showDivNode,false);
}
return reArr;
}
?2、使用页面，html代码
? ? ??
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>验证框架demo</title>
<script type='text/javascript' src='/test/jquery.min.js'></script>
<script type='text/javascript' src='/test/validate.js'></script>
<style type="text/css">
.show_validate_div{display:none;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div style="width:500px;margin:0 auto;margin-top:200px;">
<form>
<table>
<tr>
<td>用户名</td>
<td><input type="text" require='false' name='uname' url='ajax.php' default='请输入用户名'></td>
<td><div class="show_validate_div" ><span style="color:green;">请输入用户名</span></div></td>
</tr>
<tr>
<td>姓名</td>
<td><input type="text" require='true' min="2" max='4' reg='chinese' default='请输入姓名'></td>
<td><div class="show_validate_div" ><span style="color:green;">请输入姓名</span></div></td>
</tr>
<tr>
<td>昵称</td>
<td><input type="text" require='true' reg='^\w{2}\d+$' regMsg='[2个字母简写]+[数字]' default='请输入昵称'></td>
<td><div class="show_validate_div" ><span style="color:green;">请输入昵称</span></div></td>
</tr>
<tr>
<td>电话</td>
<td><input type="text" require='true' default='电话或座机'></td>
<td><div class="show_validate_div"><span style="color:green;">电话或座机</span></div></td>
</tr>
<tr>
<td>身份证</td>
<td><input type="text" require='true' reg='card' regMsg='身份证自定义错误信息测试' default='请输入身份证'></td>
<td><div class="show_validate_div"><span style="color:green;">请输入身份证</span></div></td>
</tr>
<tr>
<td>价格</td>
<td><input type="text" require='true' reg='num' default='请输入价格'></td>
<td><div class="show_validate_div"><span style="color:green;">请输入价格</span></div></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" require='true' reg='email' regMsg='请输入正确的邮箱' default='请输入正确的邮箱'></td>
<td><div class="show_validate_div" ><span style="color:green;">常用邮箱</span></div></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交"></td>
<td></div></td>
</tr>
</table>
</form>
</div>
</body>
</html>
?3、ajax，php页面代码
? ? ?
<?php
$uname = $_GET['uname'];
if($uname!='test'){
echo json_encode(array('error'=>0,'msg'=>'用户名可以用'));
}else{
echo json_encode(array('error'=>1,'msg'=>'用户名已经存在'));
}
?