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 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
javascript 单选框,多选框美化代码
Aug 01 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
js实现简单的验证码
Dec 25 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
详解如何较好的使用js
Dec 16 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
PHP 数字左侧自动补0
2008/03/31 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
python中的编码知识整理汇总
2016/01/26 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
python中kmeans聚类实现代码
2018/02/23 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
Python根据服务获取端口号的方法
2019/09/25 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
Reformation官网:美国女装品牌
2018/09/14 全球购物
中学生自我鉴定
2014/02/04 职场文书
早会主持词
2014/03/17 职场文书
环卫工人节活动总结
2014/08/29 职场文书
讲文明倡议书
2015/04/29 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS