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 相关文章推荐
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
js简单倒计时实现代码
Apr 30 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
vue实现全选、反选功能
Nov 17 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
webpack3.0升级4.0的方法步骤
Apr 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实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
js href的用法
2010/05/13 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
python实现线程池的方法
2015/06/30 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
历史学专业毕业生求职信
2013/09/27 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
社区志愿者培训方案
2014/06/10 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
关于五一放假的通知
2015/08/18 职场文书
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server