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 相关文章推荐
用于table内容排序
Jul 21 Javascript
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
javascript 动态添加事件代码
Nov 30 Javascript
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
javascript中使用css需要注意的地方小结
Sep 01 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 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
substr()函数中文版
2006/10/09 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
js判断变量是否空值的代码
2008/10/26 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
Python实现Const详解
2015/01/27 Python
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
Python 通配符删除文件的实例
2018/04/24 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
python默认参数调用方法解析
2020/02/09 Python
jupyter notebook 多行输出实例
2020/04/09 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
判缓刑人员个人思想汇报
2014/10/10 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android