EasyUI validatebox插件 validType属性 remote规则的使用

心已赠人 2022-02-01 21:29 540阅读 0赞

## intro ##

`validType` 用于定义字段的验证规则。其值可为`string, array, object`类型。  
`EasyUI`自带的`validatebox.defaults.rules`中有4种规则：

*  `email` 匹配email正则表达式规则
 *  `url` 匹配URL正则表达式规则
 *  `length[x, y]` 允许x~y个字符
 *  `remote[url, paramName]` 向远程机发送AJAX请求验证值，成功时返回"true"。  
    源码见后。可[扩展插件][Link 1]。

## 三种用法 ##

用法很简单，但是因为`validType`值的格式的原因，我一开始使用的时候，并没有经过`remote`验证。  
**单个验证规则**

<span>validType为字符串</span>
    <input type="text" id="simpleStr" class="easyui-validatebox"
        data-options="required:true, validType:'email'"> <br>

**多个验证规则**(`validType`值为数组或对象字面量格式)  
单个字段上的多个验证规则始于`v 1.3.2`，依次验证。

*  数组  
    如下，为依次验证`email, length[5, 6]及remote`规则。

<span>validType为字符串数组</span> <input type="text" id="arr"> <br>
    
    <script>
        $("#arr").validatebox({
            required: true,
            validType: [
                "email",
                "length[5, 6]",
                "remote['/GetAuthCode', 'inputCode']"
            ]
        });
    </script>

*  对象(需要注意的是email,url这样没有参数的规则必须写成名值对的形式)。

<span>validType为对象</span> <input type="text" id="obj"> <br>
    
    <script>
        $("#obj").validatebox({
            required: true,
            validType: {
                email: "",  // 不传参数，值为空字符串。
                length: [3, 5],
                remote: ["GetAuthCode", "inputCode"]
            }
        });
    </script>

## SrcCode ##

rules: {
        email: {
            validator: function (_567) {
                return /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\$[\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(_567);
            }, message: "Please enter a valid email address."
        }, url: {
            validator: function (_568) {
                return /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\($\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\*\+,;=]|:|@)|\/|\?)*)?$/i.test(_568);
            }, message: "Please enter a valid URL."
        }, length: {
            validator: function (_569, _56a) {
                var len = $.trim(_569).length;
                return len >= _56a[0] && len <= _56a[1];
            }, message: "Please enter a value between {0} and {1}."
        }, remote: {
            validator: function (_56b, _56c) {
                var data = {};
                data[_56c[1]] = _56b;
                var _56d = $.ajax({ url: _56c[0], dataType: "json", data: data, async: false, cache: false, type: "post" }).responseText;
                return _56d == "true";
            }, message: "Please fix this field."
        }
    }

[Link 1]: http://www.jeasyui.net/plugins/167.html