zoukankan      html  css  js  c++  java
  • 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>

      

  • 相关阅读:
    Nginx 部署多个 web 项目(虚拟主机)
    Nginx 配置文件
    Linux 安装 nginx
    Linux 安装 tomcat
    Linux 安装 Mysql 5.7.23
    Linux 安装 jdk8
    Linux 安装 lrzsz,使用 rz、sz 上传下载文件
    springMVC 拦截器
    spring 事务
    基于Aspectj 注解实现 spring AOP
  • 原文地址:https://www.cnblogs.com/zuolun2017/p/5599880.html
Copyright © 2011-2022 走看看