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 相关文章推荐
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
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读取PDF内容配合Xpdf的使用
2012/11/24 PHP
php curl的深入解析
2013/06/02 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
摩登时代观后感
2015/06/03 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL