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 相关文章推荐
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
BootStrap中
Dec 10 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
Angular.js自动化测试之protractor详解
Jul 07 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
Element Alert警告的具体使用方法
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
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
PHP错误处理函数
2016/04/03 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
JS的数组迭代方法
2015/02/05 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
python中的变量如何开辟内存
2018/06/26 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
建筑公司员工自我鉴定
2014/04/08 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技
python百行代码实现汉服圈图片爬取
2021/11/23 Python