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 相关文章推荐
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
Vue+Django项目部署详解
May 30 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
微信小程序转发事件实现解析
Oct 22 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文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
js中substring和substr的定义和用法
2014/05/05 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python socket实现简单聊天室
2018/04/01 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
C#面试题
2016/05/06 面试题
医药大学生求职简历的自我评价
2013/10/17 职场文书
党员批评与自我批评
2014/02/12 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
关于美容院的活动方案
2014/08/14 职场文书
学校学期工作总结
2015/08/13 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
导游词之天津盘山
2019/11/01 职场文书
各种货币符号快捷输入
2022/02/17 杂记
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏