EasyUI jQuery validateBox 小部件(1)

📌 相关文章

📜 EasyUI jQuery validateBox 小部件(1)

📅 最后修改于: 2023-12-03 14:40:55.447000 🧑 作者: Mango

EasyUI jQuery validateBox 小部件

EasyUI jQuery validateBox 小部件是基于jQuery和EasyUI框架开发的表单验证插件。它可以轻松地为表单元素添加各种验证规则，并在提交表单时自动进行验证。以下是一些EasyUI jQuery validateBox小部件的特点：

支持多种验证规则，如必填、长度限制、数字、邮箱、URL、电话号码等
支持自定义错误提示信息和验证函数
支持实时验证和离开时验证两种方式
支持异步验证，如通过Ajax请求后端接口进行验证
支持动态添加和移除验证规则

如何使用EasyUI jQuery validateBox小部件

第一步是引入jQuery和EasyUI框架的相关文件。可以从官方网站下载EasyUI框架，并将相关文件引入到项目中。另外，也可以使用CDN加速加载:

<!-- 引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 引入EasyUI框架相关文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/themes/default/easyui.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/themes/icon.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/jquery.easyui.min.js"></script>

第二步是引入EasyUI jQuery validateBox小部件文件，并对需要验证的表单元素进行初始化：

<!-- 引入EasyUI jQuery validateBox小部件文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/plugins/jquery.validatebox.js"></script>

<!-- 对需要验证的表单元素进行初始化 -->
<input id="username" type="text" class="easyui-validatebox" required="true" missingMessage="请输入用户名">

其中，id为“username”的input元素被添加了一个class为“easyui-validatebox”的样式，并设置了验证规则为必填，提示信息为“请输入用户名”。

第三步是进行表单验证。可以使用validateBox小部件提供的validate方法进行表单验证：

$('#form').form({
    onSubmit: function(){
        if($(this).form('validate')){
            // 表单验证通过，进行提交操作
        }
    }
});

其中，form为表单的id。

EasyUI jQuery validateBox小部件支持的验证规则

以下是EasyUI jQuery validateBox小部件支持的一些验证规则：

required：必填
length：长度限制
number：数字
email：邮箱
url：URL
phone：电话号码

除了上述验证规则外，还可以通过自定义函数进行验证。下面是一个示例：

$.extend($.fn.validatebox.defaults.rules, {
    custom: {
        validator: function(value){
            return /^[0-9a-zA-Z]*$/i.test(value);
        },
        message: '只能输入字母或数字'
    }
});

其中，“custom”为自定义验证规则的名称，validator为验证函数，message为验证失败时的提示信息。

EasyUI jQuery validateBox小部件的示例

以下是一个示例，其中表单包括用户名、密码和确认密码。其中，用户名不能为空，密码和确认密码必须一致。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EasyUI jQuery validateBox小部件示例</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/themes/icon.css">
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/plugins/jquery.validatebox.js"></script>
    <script type="text/javascript">
        $.extend($.fn.validatebox.defaults.rules, {
            confirm: {
                validator: function(value, param){
                    return value == $(param[0]).val();
                },
                message: '两次密码输入不一致'
            }
        });
    </script>
</head>
<body>
    <form id="form">
        <p>
            <label for="username">用户名：</label>
            <input id="username" name="username" class="easyui-validatebox" data-options="required:true,missingMessage:'请输入用户名'" />
        </p>
        <p>
            <label for="password">密码：</label>
            <input id="password" name="password" type="password" class="easyui-validatebox" data-options="required:true,missingMessage:'请输入密码'" />
        </p>
        <p>
            <label for="confirm">确认密码：</label>
            <input id="confirm" name="confirm" type="password" class="easyui-validatebox" data-options="required:true,missingMessage:'请再次输入密码',validType:'confirm[\'#password\']'" />
        </p>
        <p><input type="submit" value="提交"></p>
    </form>

    <script type="text/javascript">
        $('#form').form({
            onSubmit: function(){
                if($(this).form('validate')){
                    alert('验证通过，进行提交操作');
                }
            }
        });
    </script>
</body>
</html>

最终效果：

EasyUI jQuery validateBox小部件示例