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 相关文章推荐
JavaScript 密码强度判断代码
Sep 05 Javascript
JavaScript插入动态样式实现代码
Feb 22 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
过滤器vue.filters的使用方法实现
Sep 18 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
PHP闭包实例解析
2014/09/08 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
jquery下json数组的操作实现代码
2010/08/09 Javascript
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
几个常见的软件测试问题
2016/09/07 面试题
甜点店创业计划书
2014/01/27 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
教师个人自我评价范文
2014/04/13 职场文书
环保倡议书50字
2014/05/15 职场文书
地球一小时活动总结
2015/02/27 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB