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 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
Three.js学习之网格
Aug 10 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 Javascript
Element MessageBox弹框的具体使用
Jul 27 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
浅谈ThinkPHP的URL重写
2014/11/25 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
python定时器(Timer)用法简单实例
2015/06/04 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
Python  Django 母版和继承解析
2019/08/09 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
策划主管的工作职责
2013/11/24 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
小学语文教学反思范文
2016/03/03 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript