jquery validate 笔记

最新推荐文章于 2025-12-25 09:07:35 发布

原创最新推荐文章于 2025-12-25 09:07:35 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用jQuery的validator插件自定义验证规则，特别是针对日期和时间差的验证方法。通过提供的例子，展示了如何根据实际需求定制验证规则，确保前端输入的数据符合预期的逻辑。

基础的参考：http://blog.youkuaiyun.com/zhoujiaolongde/article/details/6718565

jQuery.validator.addMethod("name",function,message)
1， name为验证规则的名称
2， function定义验证的规则。
3， message是return false时的提示信息。

其中 function(value, element, params) 定义:
1)element代表包含class有endDate的控件，example 1即id为stopD控件
2)value代表stopD控件的值
3)params代表传的值，比如example 3,"startDate","starth_v","endDate","endh_v"

example 1：
<input class="endDate" id="stopD">
js中定义：
jQuery.validator.addMethod("endDate",
       function(value, element) {
           var startDate = $('#startD').val();
           var d1=startDate.split("-");
           var d2=value.split("-");
           var day1=new Date(d1[0],d1[1],d1[2]);
           var day2=new Date(d2[0],d2[1],d2[2]);
           return day1 <= day2;
       },
       "End time must be greater than start time");

example 2：
jQuery.validator.addMethod("minWords", function(value, element, params) {
return this.optional(element) || stripHtml(value).match(/\b\w+\b/g).length >= params;
}, jQuery.validator.format("Please enter at least {0} words."));

example 3：
$("#queryForm").validate({
rules: timecheck:{datediff: ["startDate","starth_v","endDate","endh_v"]}},
messages:{timecheck:{datediff: "Start time must be less than end time"}}
...
jQuery.validator.addMethod("datediff",
function(value, element,param) {
var d1=$("#"+param[0]).val();
var h1=$("#"+param[1]).val();
var d2=$("#"+param[2]).val();
var h2=$("#"+param[3]).val();

...