乐趣区

EasyUI表单验证共通整理

输入框停止输入之后就会进行输入内容校验
在文本框右侧的气泡样式报错提示,默认错误提示样式

//easyui 表单验证
$.extend($.fn.validatebox.defaults.rules, {
    // 只能包含字母、数字 
    noFont: {validator: function(value, param) {value=$.trim(value)
        var m_reg = new RegExp('^[0-9a-zA-Z]+$'); // 数字字母正则
        var inputState=m_reg.test(value);// 判断输入的内容是否是纯数字、字母
        var newval=value;
        newval=newval.replace(new RegExp("[\\+,\\/,\\\\,\\?,\\?,\\%,\\#,\\&,\\=,\\(,\\),\\(,\\),\\{,\\},\\',\\\",\\<,\\>,\\@,\\!,\\!,\\$,\\.,\\,,\\、,\\:,\\:,\\;,\\;,\\¥,\\*,\\~,\\`,\\-,\\——,\\_,\\^,\\“,\\”,\\‘,\\’,\\……,\\【,\\】,\\[,\\],\\,]", "gm"), "")// 去掉输入值的特殊字符
        newval=newval.replace(/[\u4e00-\u9fa5]/g,"")// 去掉输入值的中文字符
        $(this).val(newval);// 重新给输入框赋值
        $.fn.validatebox.defaults.rules.noFont.message="内容长度不能小于"+param[0]+"大于"+param[1];// 自定义提示文本
        if(newval.length>param[1]||newval.length<param[0]){
            // 当文本长度小于第一个参数,大于第二个参数时返回 false
            return false;
        }
        return m_reg.test(newval);// 校验新的 val 是否符合输入规则    
       }, 
    message : "" 
    },
})

html 调用

<input id=""type="text"class="easyui-textbox"name=""  data-options="validType:'inputValid[0,11]'"   />

共通验证调用方法传递验证正则和提示文字

$.extend($.fn.validatebox.defaults.rules, {
    // 只能包含字母、数字 
    inputValid: {validator: function(value, param) {value=$.trim(value)// 去掉前后空格
        $.fn.validatebox.defaults.rules.inputValid.message=param[1];// 自定义提示文本
        var m_reg = new RegExp(param[0]); // 正则
        var inputState=m_reg.test(value);
        return m_reg.test(value);// 校验 valuel 是否符合输入规则    
       }, 
    message : "" 
    },
})

html 调用
第一个参数是正则表达式,第二个参数是错误提示

<input id=""type="text"class="easyui-textbox"name=""  data-options="validType:'inputValid[\'^[0-9a-zA-Z]+$\',\'只能包含数字和字母 \']'"   />
退出移动版