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 相关文章推荐
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
js实现简单模态框实例
Nov 16 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 Javascript
node后端服务保活的实现
Nov 10 Javascript
原生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
php统计数组元素个数的方法
2015/07/02 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
JS location几个方法小姐
2008/07/09 Javascript
javascript 页面只自动刷新一次
2009/07/10 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python支持断点续传的多线程下载示例
2014/01/16 Python
Python入门篇之文件
2014/10/20 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
幼儿园户外活动总结
2014/07/04 职场文书
报到证办理个人委托书
2014/10/06 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书