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 相关文章推荐
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
JS控件的生命周期介绍
Oct 22 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
微信小程序class封装http代码实例
Aug 24 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
关于JavaScript数组去重的一些理解汇总
Sep 10 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
JAVA/JSP学习系列之六
2006/10/09 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
JavaScript 学习笔记(五)
2009/12/31 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
python 中如何获取列表的索引
2019/07/02 Python
python如何变换环境
2020/07/21 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
房产协议书范本2014
2014/09/30 职场文书
模范班主任事迹材料
2014/12/17 职场文书
Java基础之this关键字的使用
2021/06/30 Java/Android
R9700摩机记
2022/04/05 无线电
关于vue-router-link选择样式设置
2022/04/30 Vue.js