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 相关文章推荐
javascript 打印页面代码
Mar 24 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
js获取 type=radio 值的方法
May 09 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
Bootstrap table分页问题汇总
May 30 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
js实现放大镜特效
May 18 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
如何在 Vue 中使用 JSX
Feb 14 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
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
php表单处理操作
2017/11/16 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
Python中使用PIPE操作Linux管道
2015/02/04 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
超简单的Python HTTP服务
2019/07/22 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
检讨书1000字
2014/10/11 职场文书
爱情保证书
2015/01/17 职场文书
2015小学师德工作总结
2015/07/21 职场文书
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS