jQuery插件formValidator实现表单验证

下面是详细的“jQuery插件formValidator实现表单验证”的攻略：

1. 简介

formValidator是一款基于jQuery的插件，它可以让你快速、简单地实现表单验证功能。它支持各种类型的表单元素，包括文本框、多选框、下拉列表等等。同时，它还提供了很多预定义的验证规则，如必填、邮箱、手机号码等等。

2. 安装和使用

2.1 安装

formValidator插件提供了两种安装方式：

1. 直接下载http://www.formvalidator.net/download.html直接下载安装文件，解压缩后将formValidator目录复制到自己的项目中即可。

2. 使用npm进行安装：

npm install jquery-form-validator

2.2 使用

引入jQuery库和formValidator插件后，可以通过以下方式调用：

$("#myForm").validate();

其中，#myForm是需要验证的表单元素的ID。

2.3 配置

formValidator插件支持大量的配置选项，可以按需进行设置。下面是一些常用的配置：

$("#myForm").validate({
    // 是否自动触发验证，默认为true
    auto: true,

    // 验证失败时是否自动将焦点设置到第一个无效元素，默认为true
    focusOnError: true,

    // 表单验证的规则定义
    rules: {
        // 以ID为phone的文本框进行验证
        phone: {
            required: true, // 必填
            phone: true // 手机号码格式
        },
        // 以ID为email的文本框进行验证
        email: {
            required: true, // 必填
            email: true // 邮箱格式
        }
    },

    // 验证失败时的提示信息
    messages: {
        phone: {
            required: "手机号码必填",
            phone: "手机号码格式错误"
        },
        email: {
            required: "邮箱必填",
            email: "邮箱格式错误"
        }
    },

    // 其他选项
    onError: function(){}, // 验证失败时回调函数
    onSuccess: function(){} // 验证成功时回调函数
});

3. 示例

3.1 示例1

下面是一个简单的表单验证示例：

<form id="myForm">
    <div>
        <label for="phone">手机号码：</label>
        <input type="text" name="phone" id="phone"/>
    </div>
    <div>
        <label for="email">邮箱：</label>
        <input type="text" name="email" id="email"/>
    </div>
    <div>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password"/>
    </div>
    <button type="submit">提交</button>
</form>

<script src="jquery.js"></script>
<script src="jquery.form-validator.min.js"></script>
<script>
    $(document).ready(function(){
        $("#myForm").validate({
            rules: {
                phone: {
                    required: true,
                    phone: true
                },
                email: {
                    required: true,
                    email: true
                },
                password: {
                    required: true,
                    minlength: 6
                }
            },

            messages: {
                phone: {
                    required: "手机号码必填",
                    phone: "手机号码格式错误"
                },
                email: {
                    required: "邮箱必填",
                    email: "邮箱格式错误"
                },
                password: {
                    required: "密码必填",
                    minlength: "密码长度不能小于6位"
                }
            }
        });
    });
</script>

在上面的例子中，我们定义了三个表单元素，分别是手机号码、邮箱和密码，通过调用$("#myForm").validate()来启用表单验证。其中，对手机号码和邮箱定义了必填和格式验证规则，而密码则定义了必填和长度验证规则。在验证失败时，formValidator将会自动显示相应的验证提示信息。

3.2 示例2

下面是一个表格验证的示例：

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>手机号码</th>
            <th>邮箱</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" name="name" class="name"></td>
            <td><input type="text" name="phone" class="phone"></td>
            <td><input type="text" name="email" class="email"></td>
        </tr>
    </tbody>
</table>

<button id="submit">提交</button>

<script src="jquery.js"></script>
<script src="jquery.form-validator.min.js"></script>
<script>
    $(document).ready(function(){
        $.validate({
            modules: 'security',
            onSuccess: function($form) {
                alert('验证通过!');
                return false;
            }
        });
        $(".phone").live('blur', function() {
            $(this).validate({
                modules : 'security',
                onSuccess : function() {},
                onError: function() {
                    alert("手机号码格式错误");
                },
                validateOnBlur : true
            });
        });
        $(".email").live('blur', function() {
            $(this).validate({
                modules : 'security',
                onSuccess : function() {},
                onError: function() {
                    alert("邮箱格式错误");
                },
                validateOnBlur : true
            });
        });
        $("#submit").click(function() {
            var valid = true;
            $("form input").each(function() {
                console.log($(this));
                if(!$(this).isValid()) {
                    valid = false;
                }
            });
            return valid;
        });
    });
</script>

在上面的例子中，我们通过调用$.validate()来启用表单验证。在表格中对每个单元格都定义了input元素，不同的单元格输入框使用了不同的class名称。通过遍历input元素来验证整个表格。在验证输入框的手机号码和邮箱格式时，我们还使用了live()方法来为单元格输入框动态添加验证规则。当验证失败时，我们通过onError函数来提示用户相应的错误信息，而在验证通过时则通过onSuccess函数来执行相关业务逻辑。在表单提交前，我们还使用isValid()函数来判断整个表单是否验证通过。

希望以上内容对你有所帮助。