• jQuery EasyUI---validatebox 校验规则扩展


    EasyUI 的 validatebox 插件, 验证规则相对比较单一也比较少,如下。

    rules: {
                email:{
                    validator: function(value){
                        return ...?$/i.test(value);
                    },
                    message: 'Please enter a valid email address.'
                },
                url: {
                    validator: function(value){
                        return ...?$/i.test(value);
                    },
                    message: 'Please enter a valid URL.'
                },
                length: {
                    validator: function(value, param){
                        var len = $.trim(value).length;
                        return len >= param[0] && len <= param[1]
                    },
                    message: 'Please enter a value between {0} and {1}.'
                },
                remote: {
                    validator: function(value, param){
                        var data = {};
                        data[param[1]] = value;
                        var response = $.ajax({
                            url:param[0],
                            dataType:'json',
                            data:data,
                            async:false,
                            cache:false,
                            type:'post'
                        }).responseText;
                        return response == 'true';
                    },
                    message: 'Please fix this field.'
                }
            },

    自定义校验规则

    对validatebox 进行拓展如:在原有的规则上进行拓展增加下面三个验证规则,单独文件 easyui-extend-textbox.js。

    (function($) {
    	/**
    	 * jQuery EasyUI 1.4 --- 功能扩展
    	 * 
    	 * Copyright (c) 2009-2015 RCM
    	 *
    	 * 新增 validatebox 校验规则
    	 * 
    	 * 后面可以增加相应的规则
    	 */
    	$.extend($.fn.validatebox.defaults.rules, {
    		idcard: {
    			validator: function(value, param) {
    				return /^d{15}|d{}18$/.test(value);
    			},
    			message: '请输入正确的身份证号码'
    		},
    		checkNum: {
    			validator: function(value, param) {
    				return /^([0-9]+)$/.test(value);
    			},
    			message: '请输入整数'
    		},
    		/**
    		 * 1 可以全数字
    		 *2 可以全字母
    		 *3 可以全特殊字符(~!@#$%^&*.)
    		 *4 三种的组合
    		 *5 可以是任意两种的组合
    		 *6 长度6-22
    		 * */
    		checkPwd: {
    			validator: function(value, param) {
    				return /^[@A-Za-z0-9!#$\%^&*.~]{6,22}$/.test(value);
    			},
    			message: '请输入正确的密码格式'
    		},
    		
    		checkFloat: {
    			validator: function(value, param) {
    				return /^[+|-]?([0-9]+.[0-9]+)|[0-9]+$/.test(value);
    			},
    			message: '请输入合法数字'
    		}
    	});
    })(jQuery);
    

      使用方法:引入拓展的js 这个就不说了。下面在使用中跟官方中的版本使用没什么区别。

    <tr>
             <td>年龄:</td>
    	 <td>
          <input class="easyui-textbox" data-options="required:true,validType:'checkNum'" name="age" id="age"></input>
        </td> </tr>

      

  • 相关阅读:
    Java基础知识(一)环境变量的设置、变量与常量、自动类型转换、自增长、赋值运算符
    ModelState
    DOM
    正则表达式常见形式
    通过JS设置一个元素的文本
    JS(三) 原型对象与原型链
    JS(二)call方法和apply方法
    第四周学习进度表
    敏捷开发方法综述
    数组02
  • 原文地址:https://www.cnblogs.com/zuolun2017/p/5599880.html
Copyright © 2020-2023  润新知