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中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
浅谈javascript回调函数
Dec 07 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
jQuery操作cookie
Aug 08 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 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脚本的10个技巧(5)
2006/10/09 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
利用Python命令行传递实例化对象的方法
2016/11/02 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
python3实现点餐系统
2019/01/24 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
pytorch masked_fill报错的解决
2020/02/18 Python
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
国外软件测试工程师面试题
2016/12/09 面试题
异步传递消息系统的作用
2016/05/01 面试题
应聘编辑职位自荐信范文
2014/01/05 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
公司建议书怎么写
2014/05/15 职场文书
校庆标语集锦
2014/06/25 职场文书
老龄工作先进事迹
2014/08/15 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python
yolov5返回坐标的方法实例
2022/03/17 Python