轻松学习jQuery插件EasyUI EasyUI表单验证

轻松学习jQuery插件EasyUI EasyUI表单验证

EasyUI是一个基于jQuery的UI插件集合，包含了各种实用的UI组件，例如表格、对话框、表单等等。其中很多组件都支持表单验证功能，下面将演示如何轻松学习EasyUI插件中的表单验证功能。

1. 引入EasyUI库文件

在使用EasyUI插件之前，需要先引入EasyUI库文件。可以通过CDN或者本地文件引入EasyUI库，例如：

<!-- 引入EasyUI库文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.19/themes/default/easyui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.19/themes/icon.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.19/jquery.easyui.min.js"></script>

2. 使用EasyUI表单验证插件

EasyUI提供了一套完整的表单验证插件，可以非常方便地实现表单验证功能。以下是使用EasyUI表单验证插件的基本流程：

2.1 在表单标签上添加验证选项

在form标签中添加data-options属性即可。例如：

<form id="form" method="post" data-options="
        validation:true,
        onSubmit: function() {
            if ($(this).form('validate')) {
                // 表单验证通过，提交表单
            }
        }
    ">
    <!-- 表单控件 -->
</form>

2.2 为表单控件添加验证规则

使用EasyUI提供的验证规则，添加在表单控件中，例如：

<input class="easyui-textbox" type="text" name="username" data-options="required:true">

以上代码表示在用户名输入框中添加必填验证规则。

2.3 自定义验证规则

EasyUI提供了自定义验证规则功能，可以通过在表单控件中添加validType属性自定义验证规则的名称，然后在页面中定义该名称对应的验证规则即可。例如：

<input class="easyui-textbox" type="text" name="username" data-options="required:true,validType:'myValid'">

<!-- 定义自定义验证规则 -->
<script>
    $.extend($.fn.validatebox.defaults.rules, {
        myValid: {
            validator: function(value, param){
                // 验证规则的实现
            },
            message: '自定义验证规则的提示信息'
        }
    });
</script>

以上代码表示在用户名输入框中添加自定义验证规则"myValid"，并且在页面中定义该验证规则的实现和提示信息。

3. 示例说明

以下是两个简单的示例，演示如何使用EasyUI表单验证插件：

3.1 示例一：必填项验证

<form id="form" method="post" data-options="
        validation:true,
        onSubmit: function() {
            if ($(this).form('validate')) {
                alert('表单验证通过，可以提交表单了！');
            }
        }
    ">
    <div style="margin-bottom:20px">
        <input class="easyui-textbox" type="text" name="username" label="用户名：" labelPosition="top" style="width:100%;" data-options="required:true" />
    </div>
    <div style="margin-bottom:20px">
        <input class="easyui-textbox" type="password" name="password" label="密码：" labelPosition="top" style="width:100%;" data-options="required:true" />
    </div>
    <button type="submit">提交</button>
</form>

<!-- 引入EasyUI库文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.19/themes/default/easyui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.19/themes/icon.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.19/jquery.easyui.min.js"></script>
<script>
    $(function(){
        $('#form').form({
            onSubmit:function(){
                return $(this).form('validate');
            }
        });
    });
</script>

以上代码表示一个登录表单，其中用户名和密码都是必填项。如果有未填写的必填项，表单提交将被阻止。

3.2 示例二：自定义验证规则

<form id="form" method="post" data-options="
        validation:true,
        onSubmit: function() {
            if ($(this).form('validate')) {
                alert('表单验证通过，可以提交表单了！');
            }
        }
    ">
    <div style="margin-bottom:20px">
        <input class="easyui-textbox" type="text" name="username" label="用户名：" labelPosition="top" style="width:100%;" data-options="required:true, validType:'inputMaxLength[10]'" />
    </div>
    <button type="submit">提交</button>
</form>

<!-- 引入EasyUI库文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.19/themes/default/easyui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.19/themes/icon.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.19/jquery.easyui.min.js"></script>
<script>
    $(function(){
        $('#form').form({
            onSubmit:function(){
                return $(this).form('validate');
            }
        });
        $.extend($.fn.validatebox.defaults.rules, {
            inputMaxLength: {
            validator: function(value, param){
                return $.trim(value).length <= param[0];
            },
            message: '输入长度不能超过 {0} 个字符！'
            }
        });
    });
</script>

以上代码表示一个输入框，使用了自定义验证规则"inputMaxLength"，限制输入内容的长度不能超过10个字符。如果输入内容长度超过10个字符，表单提交将被阻止。