jquery validate 自定义验证方法介绍 日期验证


Posted in Javascript onFebruary 27, 2014

jquery validate有很多验证规则,但是更多的时候,需要根据特定的情况进行自定义验证规则。

这里就来聊一聊jquery validate的自定义验证。

jquery validate有一个方法,可以让用户来自定义验证规则。

案例一:

//自定义验证
            $.validator.addMethod("isPositive",function(value,element){
                var score = /^[0-9]*$/;
                return this.optional(element) || (score.test(value));
            },"<font color='#E47068'>请输入大于0的数字</font>");

通过addMethod用户可以自定义自己的验证规则

这个方法有三个参数,第一个参数表示验证规则名称,这里是isPositive,表示是否为正数。

第二个参数是真正的验证主体,它是一个函数,函数的第一个value表示调用这个验证规则的表单的值,第二个element可以用来判断是否为空,为空的时候,就不调用这个验证规则了。

第三个参数是返回的错误提示。

具体如何使用呢?

其实跟jquery validate固有的验证规则使用是一样的。

 <tr bgcolor="#f7f7f7"  height="43" align="right">
                        <td class="font14_s pdr_12 grey_70">总分:</td>
                        <td class="font14_s pl40" align="left"><input type="text" id="fullscore" name="fullscore" style=" margin-left: 10px; margin-right: 2px;" value="<!--{$aExams.fullscore}-->" class="required number isPositive input_233" /></td>
                    </tr>

如上所示,加粗的地方就是使用的方法,一共用了三个验证规则,一个是必须,一个是数字,一个是自定义验证规则。

效果图如下:

jquery validate 自定义验证方法介绍 日期验证

案例二:

表单提交时,经常会需要对日期进行验证,比如结束时间必须大于开始时间。

这个时候可以通过jquery validate 自定义一个验证方法,进行验证。

方法如下:

$.validator.addMethod("compareDate",function(value,element){
                var assigntime = $("#assigntime").val();
                var deadlinetime = $("#deadlinetime").val();
                var reg = new RegExp('-','g');
                assigntime = assigntime.replace(reg,'/');//正则替换
                deadlinetime = deadlinetime.replace(reg,'/');
                assigntime = new Date(parseInt(Date.parse(assigntime),10));
                deadlinetime = new Date(parseInt(Date.parse(deadlinetime),10));
                if(assigntime>deadlinetime){
                    return false;
                }else{
                    return true;
                }
            },"<font color='#E47068'>结束日期必须大于开始日期</font>");

上述代码红色部分是对时间字符串进行处理,处理成2013/12/12 08:09:00这种标准格式,

在处理的时候要用到replace的方法,这个方法最后结合正则表达式进行使用,也就是第一行的reg对象。

替换完了之后,如果比较时间呢?要进行三个处理,

1.将标准时间转化为时间戳通过Date.parse()方法来处理。

2.将时间戳转化为整数,确保万一,通过parseInt("",10)来处理。

3.将时间戳转为日期对象new Date()。

转为对象之后,就能够比较时间大小了,直接判断,如果结束时间小于开始时间,就进行错误提示。

这个时候compareDate就可以像其他的jquery validate验证规则一样验证了。

案例三:ajax验证

去数据库验证用户名是否存在,这个也会经常用到。

$.validator.addMethod("checkUserExist",function(value,element){
                var user = value;
                $.ajax({
                    type:"POST",
                    async:false, 
                    url:"/default/index/ajax/do/ajaxcheckuser",
                    data:"nick="+user,
                    success:function(response){
                        if(response){
                            res = false;
                        }else{
                            res = true;
                        }
                    }
                });
                return res;
            },"<font color='#E47068'>用户名已存在</font>");

后台验证代码:
case 'ajaxcheckuser': 
                $nick = trim($this->_getParam('nick'));
                if(isset($nick)){
                    $where['lx_user.nick = ?'] = array('type'=>1,'val'=>$nick);
                    $aUser = $daoUser->getUser($where);
                    if(count($aUser)>=1){
                        echo TRUE;
                    }else{
                        echo FALSE;
                    }
                }else{
                    echo FALSE;
                }
                break;

如果数据库中存在,就返回true。

jquery validate 自定义验证方法介绍 日期验证

Javascript 相关文章推荐
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
javascript 清除输入框中的数据
Apr 13 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
JS定时刷新页面及跳转页面的方法
Jul 04 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
javascript基本语法
May 31 Javascript
如何编写jquery插件
Mar 29 jQuery
JavaScript函数柯里化实现原理及过程
Dec 02 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 #Javascript
jquery退出each循环的写法
Feb 26 #Javascript
jQuery中的val()示例应用
Feb 26 #Javascript
jquery live()调用不存在的解决方法
Feb 26 #Javascript
js获得参数的getParameter使用示例
Feb 26 #Javascript
父节点获取子节点的字符串示例代码
Feb 26 #Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 #Javascript
You might like
php中神奇的fastcgi_finish_request
2011/05/02 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
Python计算三维矢量幅度的方法
2015/06/15 Python
使用tensorflow实现AlexNet
2017/11/20 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
详解Python sys.argv使用方法
2019/05/10 Python
python操作yaml说明
2020/04/08 Python
Spy++的使用方法及下载教程
2021/01/29 Python
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
中英文自我评价常用句型
2013/12/19 职场文书
学习决心书范文
2014/03/11 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
铣工实训报告
2014/11/05 职场文书
公司奖励通知
2015/04/21 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
安全守法证明
2015/06/23 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers