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 相关文章推荐
表单元素事件 (Form Element Events)
Jul 17 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
Sep 03 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
Nov 02 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
js实现下拉框二级联动
Dec 04 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
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导出oracle库的php代码
2009/04/20 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
室内拓展活动方案
2014/02/13 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
计算机专业求职信
2014/06/02 职场文书
停水通知
2015/04/16 职场文书