jQuery Validation Engine验证控件调用外部函数验证的方法


Posted in Javascript onJanuary 18, 2017

在使用jQuery Validation Engine的时候,我们除了使用自带的API之外,还可以自己自定义正则验证。自定义正则验证上一篇已经讲过了,如果想使用自定义函数进行验证怎么办?其实这个控件有个bug,在api中说

jQuery Validation Engine验证控件调用外部函数验证的方法

也就是在我们需要进行验证的地方加上funcCall[自定义函数名],但是我们会发现总会报错,说找不到你这个函数名。其实它的要求是要添加required进行综合验证,也就是validate[required,funcCall[yorn]],这样它才识别我们的自定义函数。但是我们就是不想要required这个呢?或者说我们在符合某种条件下才想让required这个非空验证功能生效呢?

<textarea class="m-area add-tw validate[funcCall[yorn]]" id="remark" cols="30" rows="10" ></textarea>

那么就需要使用以下几种方法综合施行,网上老外的解决办法就是在函数中push一个required,可以让其正常执行。

我定义了一个yorn的函数,而基本格式就是function yorn(field, rules, i, options){},其中field代表的是你验证的那个元素,我这里验证的是textarea,那么field就代表的是textarea。

jQuery Validation Engine验证控件调用外部函数验证的方法

首先我讲一下我要实现的功能,我的需求是在点击不通过且备注为空的时候触发验证,提示“必须填写内容”。那么在通过备注为空,通过备注不为空,不通过备注不为空的情况下都不能触发验证提示信息。而如果validate[required]这样的话,只要不填写备注信息都会触发提示信息。所以我的思路是,当点击保存按钮的时候判断,点击的是哪个radio,点击不通过的时候给不通过的radio添加一个自定义属性,同时赋值。而当点击通过radio的时候删除这个自定义属性。然后接着进入验证,也就是进入自定义函数,获取到不通过radio的自定义属性值,获取到备注的value,然后判断这两个条件是否同时成立,如果条件成立,则首先rules.push('required');因为我们前面说了如果想要实现自定义函数验证必须要有required,然后接着return options.allrules.required.alertText; 这句话是什么意思呢?就是返回你要提示的信息。而这个提示信息则另有地方进行设置。

html文件,validate[funcCall[yorn]]设置自定义函数validate[funcCall[自定义函数名]]

<form id="approval">//这个验证控件必须有form
      <div class="name-ipt">
        <div class="m-name"><span>意见:</span></div>
        <input type="radio" name="trial" class="m-radio col" />通过
        <input type="radio" name="trial" class="m-radio col" id="nocheck"/>不通过
      </div>
      <div class="name-ipt"></div>
      <div class="area-ipt add-td">
        <div class="m-name"><span>备注:</span></div>
        <textarea class="m-area add-tw validate[funcCall[yorn]]" id="remark" cols="30" rows="10"></textarea>
        <span class="m-span add-stl">剩余可输入1000字</span>
      </div>
    </div>
</form>
<div class="add-sb">
   <a href="#" class="save-btn m" ng-click="saveAudit()" >保存</a>
</div>
(有效:步骤1)

因为我是用的angular,所以给保存一个事件,在点击保存的时候触发事件,然后判断两个radio哪个被checked,其他的上面说过。接着触发验证进入自定义函数中。、、

//自己js文件中写
//保存
          $scope.saveAudit = function(){
            if($('#nocheck').attr('checked')){
              $("#remark").attr("trialAttr",'N');
            }else{
              $("#remark").removeAttr('trialAttr');
            }
            if($('#approval').validationEngine('validate')){
//验证通过的话之后要执行的内容
}
}
(有效:步骤2)

自定义函数必须带rules.push('required');同时return options.allrules.required.alertText;这个自定义函数写在自己的js文件里就行

//自己的js文件中写
function yorn(field, rules, i, options){
    var trialAttr = field.attr("trialAttr") ;
    var textareaval = field.val();

    if(trialAttr == "N" && textareaval==''){
      rules.push('required');
      return options.allrules.required.alertText;
    }
}
(有效:步骤3)

接下来要设置自定义提示信息了,找到jquery.validationEngine-zh_CN.js文件,然后在最下面自己跟随一个对象,函数名在前面,后面alertText后跟你要提示的信息。这样就OK了。

//这个在jquery.validationEngine-zh_CN.js中写

jQuery Validation Engine验证控件调用外部函数验证的方法

(有效:步骤4)

之前我在这个文件的下面按照api自定义了一个函数,但是发现根本无法执行,因为当进入验证的时候,首先判断validate[required,funcCall[yorn]]的自定义函数中是否存在required,如果不存在就无法进入到jquery.validationEngine-zh_CN.js这个文件中执行我们内部定义的函数。但是如果把自定义函数放在我们自己的js中,就会先执行我们自己js文件中的函数,最后才判断是否存在required,而这个时候我们已经push进去了,所以就不会报错说找不到你自定义函数名了。

jQuery Validation Engine验证控件调用外部函数验证的方法

(这个是无效且不可执行的,不要用)

这个验证控件其实挺不错的,只是这个bug给搞了半天,还好网上有解决办法,但是貌似没有一个像我说的这么清楚的,都是点明一下而已。希望能够帮助到大家,同时自己留存以后用。

Javascript 相关文章推荐
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
layui导出所有数据的例子
Sep 10 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
elementui实现预览图片组件二次封装
Dec 29 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
原生js实现回复评论功能
Jan 18 #Javascript
js实现表格筛选功能
Jan 18 #Javascript
js放大镜放大购物图片效果
Jan 18 #Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 #Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 #Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 #Javascript
jQuery中的一些小技巧
Jan 18 #Javascript
You might like
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
jquery 插件开发方法小结
2009/10/23 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
JSONP原理及应用实例详解
2018/09/13 Javascript
JS实现简易计算器
2020/02/14 Javascript
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
详解python单例模式与metaclass
2016/01/15 Python
Python科学计算之Pandas详解
2017/01/15 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
Python调用.NET库的方法步骤
2019/12/27 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
J2EE包括哪些技术
2016/11/25 面试题
建筑施工安全生产责任书
2014/07/22 职场文书
环境科学专业求职信
2014/08/04 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
驻村工作简报
2015/07/20 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
MySQL 计算连续登录天数
2022/05/11 MySQL