easyui form validate

最新推荐文章于 2024-04-15 14:11:06 发布

jingyuwang1

最新推荐文章于 2024-04-15 14:11:06 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/jingyuwang1/article/details/53284834

本文介绍了如何使用EasyUI进行表单验证，包括其自带的简单验证和自定义复杂验证的方法。通过示例展示了自定义验证规则，以及动态添加标签并触发验证的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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')) {

// 验证通过

自定义验证

<input id="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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>easyuiform validate</title>
    <link rel="stylesheet" href="files/easyui.css">
    <script type="text/javascript" src="files/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="files/jquery.easyui.min.js"></script>
</head>
<body>
    <form id="testForm" onsubmit="return formValidate();" style="margin: 10px;">
        <div>
            <input type="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>
            <input type="text" class="easyui-validatebox"name="email"
                   data-options="required:true,validType:['email','length[0,20]']"
                   missingMessage="邮箱不能为空" value="t@sina.com"
                   invalidMessage="邮箱格式不正确">
        </div>
        <div>
            <input type="text" class="easyui-numberbox"name="number"
                   data-options="required:true"value="1"
                   missingMessage="数字不能为空">
        </div>
        <div>
            <input id="test" type="text" class="easyui-validatebox"
                   missingMessage="定制输入框不能为空"
                   data-options="required:true,validType:'test'">
        </div>
        <div id="testDiv">

        </div>
        <div>
            <input type="submit" value="提交"><button onclick="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>