jquery validate小结

今天发现原来jquery还有jquery validate这个好东西,可以用来验证表单的,下面转载和小结下:

1 初步使用,很简单,引入jqueryvalidate.js,下载在

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

2 一个例子

<script>

function checkidcard(num){

var len = num.length, re;

if (len == 15)

re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/);

else if (len == 18)

re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d)$/);

else{

//alert("请输入15或18位身份证号,您输入的是 "+len+ "位");

return false;

}

var a = num.match(re);

if (a != null){

if (len==15){

var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);

var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];

}else{

var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);

var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];

}

if (!B){

//alert("输入的身份证号 "+ a[0] +" 里出生日期不对！");

return false;

}

}

return true;

}

</script>

<script type="text/javascript">

$.validator.setDefaults({

submitHandler: function() { alert("submitted!"); }

});

// 添加验证方法 (身份证号码验证)

jQuery.validator.addMethod("isIdCardNo", function(value, element) {

return this.optional(element) || checkidcard(value);

}, "请正确输入您的身份证号码");

$().ready(function() {

$("#firstform").validate();

$("#secondform").validate({

rules:{

xm:{

required: true,

minlength: 2,

maxlength: 5

},

pwd:{

required: true,

minlength: 6

},

confirm_pwd:{

required: true,

equalTo: "#pwd"

},

f2csrq:{

required: true,

date: true

},

f2xjzd: {

required: true

},

f2sfzh:{

required: true,

isIdCardNo: true

}

},

messages:{

xm:{

required: "请填写姓名",

minlength: "字符长度不能小于2个字符",

maxlength: "字符长度不能大于5个字符"

},

pwd:{

required: "请填写密码",

minlength: "字符长度不能小于6个字符"

},

confirm_pwd:{

required: "请再次输入密码",

equalTo: "密码不一致"

},

f2csrq:{

required: "请输入出生日期",

date: "日期格式不正确(例：2009/04/07)"

},

f2xjzd:{

required: "请输入地址"

},

f2sfzh:{

required: "请输入身份证号",

isIdCardNo: "身份证号不正确"

}

}

});

});

</script>

注意的是:在INPUT里面class加入required说明是必填项，其他的就是验证相关数据比如email就是验证email的数据结构

以下列出validate自带的默认验证

required: "必选字段",

remote: "请修正该字段",

email: "请输入正确格式的电子邮件",

url: "请输入合法的网址",

date: "请输入合法的日期",

dateISO: "请输入合法的日期 (ISO).",

number: "请输入合法的数字",

digits: "只能输入整数",

creditcard: "请输入合法的信用卡号",

equalTo: "请再次输入相同的值",

accept: "请输入拥有合法后缀名的字符串",

maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),

minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),

rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),

range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),

max: jQuery.format("请输入一个最大为 {0} 的值"),

min: jQuery.format("请输入一个最小为 {0} 的值")

validate ()的可选项

debug：进行调试模式

$

(".selector").validate

({

debug: true

})

把调试设置为默认

$

.validator.setDefaults

({

debug: true

})

submitHandler：用其他方式替代默认的SUBMIT,比如用AJAX的方式提交

$

(".selector").validate

({

submitHandler: function(form) {

$

(form).ajaxSubmit();

}

})

ignore：忽略某些元素不验证

$

("#myform").validate

({

ignore: ".ignore"

})

rules： 默认下根据form的classes, attributes, metadata判断，但也可以在validate函数里面声明

Key/value 可自定义规则. Key是对象的名字 value是对象的规则，可以组合使用 class/attribute/metadata rules.

以下代码特别验证selector类中name='name'是必填项并且 email是既是必填又要符合email的格式

$

(".selector").validate

({

rules: {

// simple rule, converted to {required:true}

name: "required",

// compound rule

email: {

required: true,

email: true

}

}

})

messages：更改默认的提示信息

$

(".selector").validate

({

rules: {

name: "required",

email: {

required: true,

email: true

}

},

messages: {

name: "Please specify your name",

email: {

required: "We need your email address to contact you",

email: "Your email address must be in the format of [email protected]"

}

}

})

groups：定义一个组，把几个地方的出错信息同意放在一个地方，用errorPlacement控制把出错信息放在哪里

$

("#myform").validate

({

groups: {

username: "fname lname"

},

errorPlacement: function(error, element) {

if (element.attr("name") == "fname" || element.attr("name") == "lname" )

error.insertAfter("#lastname");

else

error.insertAfter(element);

},

debug:true

})

3 补充多一个jquery validate验证日期的例子:

<script type="text/javascript" src="script/jquery.js"></script>

<script type="text/javascript" src="script/jquery.validate.js"></script>

<SCRIPT LANGUAGE="JavaScript">

<!--

jQuery(function(){

jQuery.validator.methods.compareDate = function(value, element, param) {

//var startDate = jQuery(param).val() + ":00";补全yyyy-MM-dd HH:mm:ss格式

//value = value + ":00";

var startDate = jQuery(param).val();

var date1 = new Date(Date.parse(startDate.replace("-", "/")));

var date2 = new Date(Date.parse(value.replace("-", "/")));

return date1 < date2;

};

jQuery("#form1").validate({

focusInvalid:false,

rules:{

"timeStart":{

required: true

},

"timeEnd": {

required: true,

compareDate: "#timeStart"

}

},

messages:{

"timeStart":{

required: "开始时间不能为空"

},

"timeEnd":{

required: "结束时间不能为空",

compareDate: "结束日期必须大于开始日期!"

}

}

});

});

//-->

</SCRIPT>

</HEAD>

<BODY>

<form id="form1" name="form1" method="post" action="demo.html">

<p>timeStart:

<input name="timeStart" type="text" id="timeStart" value="2011-02-17 10:00:00"> yyyy-MM-dd HH:mm:ss

</p>

<p>timeEnd:

<input name="timeEnd" type="text" id="timeEnd" value="2011-02-17 9:00:00"> yyyy-MM-dd HH:mm:ss

</p>

<p>

<input type="submit" name="Submit" value="提交">

</p>

</form>