easyui form validate

来源：互联网发布：日本进口食品批发淘宝编辑：程序博客网时间：2024/05/24 07:08

form表单验证

easyui自带的表单验证比较简单，只支持非空验证、URL和email等一些简单验证，如果需要更复杂验证，需要自己实现，不过也很方便。

原始验证

<input type="text" class="easyui-validatebox" name="url"       data-options="required:true, validType:['url','length[0,20]']"       missingMessage="url不能为空"       invalidMessage="url格式不正确"><input type="text" class="easyui-validatebox" name="email"       data-options="required:true, validType:['email','length[0,20]']"       missingMessage="邮箱不能为空"       invalidMessage="邮箱格式不正确"><input type="text" class="easyui-numberbox" name="number"       data-options="required:true"       missingMessage="数字不能为空">

if ($('#testForm').form('validate')) {

// 验证通过

自定义验证

<inputid="test"type="text"class="easyui-validatebox"data-options="validType:'test'">

$.extend($.fn.validatebox.defaults.rules, {
    test: {
        validator: function(value, param) {
            var rt= true;
            if (value.split('#').length>5) {
                rt = false;
            }
            return rt;
        },
        message: '最多可添加不超过50条'
    }
});

注意：动态生成的标签是不可以被框架识别的，需要手动触发，如：

$('#testInput').validatebox({
required: true
});

demo

<!DOCTYPEhtml>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>easyuiform validate</title>
    <linkrel="stylesheet"href="files/easyui.css">
    <scripttype="text/javascript"src="files/jquery-2.1.0.min.js"></script>
    <scripttype="text/javascript"src="files/jquery.easyui.min.js"></script>
</head>
<body>
    <formid="testForm"onsubmit="returnformValidate();"style="margin:10px;">
        <div>
            <inputtype="text"class="easyui-validatebox"name="url"
            data-options="required:true,validType:['url','length[0,20]']"
            missingMessage="url不能为空"value="http://t.com"
            invalidMessage="url格式不正确">
        </div>
        <div>
            <inputtype="text"class="easyui-validatebox"name="email"
                   data-options="required:true,validType:['email','length[0,20]']"
                   missingMessage="邮箱不能为空"value="t@sina.com"
                   invalidMessage="邮箱格式不正确">
        </div>
        <div>
            <inputtype="text"class="easyui-numberbox"name="number"
                   data-options="required:true"value="1"
                   missingMessage="数字不能为空">
        </div>
        <div>
            <inputid="test"type="text"class="easyui-validatebox"
                   missingMessage="定制输入框不能为空"
                   data-options="required:true,validType:'test'">
        </div>
        <divid="testDiv">

        </div>
        <div>
            <inputtype="submit"value="提交"><buttononclick="add()">添加一个动态标签</button>
        </div>
    </form>
<script>
    /**
     * 动态生成标签并验证
     */
    functionadd() {
        var html='<input id="testInput"type="text" class="easyui-validatebox"'+
                'missingMessage="测试框不能为空" name="test" data-options="required:true">';
        $('#testDiv').append(html);
        $('#testInput').validatebox({
            required: true
        });
    }

    function formValidate() {
        return $('#testForm').form('validate');
    }

    $.extend($.fn.validatebox.defaults.rules, {
        test: {
            validator: function(value, param) {
                var rt= true;
                if (-1==value.indexOf('#')) {
                    rt = false;
                }
                return rt;
            },
            message: '必须输入#号'
        }
    });
</script>
</body>
</html>

0 0