jquery表单验证使用插件formValidator

jQuery表单验证插件formValidator是一个简单易用的表单验证插件，能够有效地帮助web开发者处理表单验证逻辑，减少开发时间。本攻略旨在介绍如何使用该插件实现表单验证。

安装formValidator插件

第一步是将formValidator插件文件下载并引入项目中，可以通过 官网 下载最新版本插件，也可以使用CDN进行引入。

在HTML文件头部添加如下代码：

<script src="路径/jquery.formValidator.min.js"></script>

配置表单验证规则

引入后，需要编写配置表单验证规则的代码。以下是示例代码：

$(function(){
    // 设置表单验证规则
    $.formValidator.initConfig({
        formID:"form1", // 表单id
        onerror:function(msg){}, // 验证失败时的提示信息
        onsuccess:function(){}, // 验证成功时的回调函数
        debug:false // 使用调试模式
    });
    // 添加验证规则
    $("#name").formValidator({
        onshow:"请填写姓名",
        onfocus:"",
        oncorrect:"输入正确"
    }).inputValidator({
        min:2,
        max:10,
        onerror:"请输入2-10个字符"
    }).regexValidator({
        regexp:"chinese",
        datatype:"enum",
        onerror:"请输入中文"
    });
});

在这段代码中，formID字段是必须的，用于指定需要验证的表单。onerror和onsuccess分别是验证失败和成功后的回调函数，可以根据实际需要编写处理逻辑。debug可以用于方便地调试验证规则。

此外，代码中还指定了一个字段name，表示表单中需要验证的输入框，onshow、onfocus、oncorrect分别是显示、获得焦点、验证正确的提示信息。inputValidator用于限制输入框的输入长度，regexValidator用于验证输入规则是否正确。

触发表单验证

配置好表单验证规则以后，需要在表单提交时触发验证。以下是一个示例代码：

$(function(){
    $("#subBtn").click(function(){
        // 触发表单验证
        if(!$.formValidator.pageIsValid()){
            return;
        }
        // 如果验证通过，就执行提交操作
        $("#form1").submit();
    });
});

这段代码中，点击提交按钮时，首先会触发表单验证。如果验证未通过，就会停止提交操作。如果验证通过，就会执行表单提交操作。

示例

下面给出两个具体的示例说明。

示例一

该示例是一个简单的登录表单，包含用户名和密码两个输入框。以下是示例代码：

<form action="/login" method="post" id="form1">
    <div class="form-group">
        <label for="username">用户名：</label>
        <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
    </div>
    <div class="form-group">
        <label for="password">密码：</label>
        <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
    </div>
    <button type="button" class="btn btn-primary" id="subBtn">登录</button>
</form>

以下是对应的验证规则配置：

$(function(){
    // 设置表单验证规则
    $.formValidator.initConfig({
        formID:"form1", // 表单id
        onerror:function(msg){}, // 验证失败时的提示信息
        onsuccess:function(){}, // 验证成功时的回调函数
        debug:false // 使用调试模式
    });
    // 添加用户名验证规则
    $("#username").formValidator({
        onshow:"请输入用户名",
        onfocus:"",
        oncorrect:"输入正确"
    }).inputValidator({
        min:5,
        max:20,
        onerror:"请输入5-20个字符作为用户名"
    });
    // 添加密码验证规则
    $("#password").formValidator({
        onshow:"请输入密码",
        onfocus:"",
        oncorrect:"输入正确"
    }).inputValidator({
        min:6,
        max:20,
        onerror:"请输入6-20个字符作为密码"
    });
    // 触发表单验证
    $("#subBtn").click(function(){
        // 触发表单验证
        if(!$.formValidator.pageIsValid()){
            return;
        }
        // 如果验证通过，就执行提交操作
        $("#form1").submit();
    });
});

示例二

该示例是一个复杂的表单，包含多个输入框和选择框。以下是示例代码：

<form action="/register" method="post" id="form1">
    <div class="form-group">
        <label for="username">用户名：</label>
        <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
    </div>
    <div class="form-group">
        <label for="password">密码：</label>
        <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
    </div>
    <div class="form-group">
        <label for="email">邮箱：</label>
        <input type="email" class="form-control" name="email" id="email" placeholder="请输入邮箱">
    </div>
    <div class="form-group">
        <label for="age">年龄：</label>
        <input type="number" class="form-control" name="age" id="age" placeholder="请输入年龄">
    </div>
    <div class="form-group">
        <label for="sex">性别：</label>
        <select class="form-control" name="sex" id="sex">
            <option value="">请选择</option>
            <option value="1">男</option>
            <option value="2">女</option>
        </select>
    </div>
    <div class="form-group">
        <label for="identity">身份证号：</label>
        <input type="text" class="form-control" name="identity" id="identity" placeholder="请输入身份证号码">
    </div>
    <button type="button" class="btn btn-primary" id="subBtn">注册</button>
</form>

以下是对应的验证规则配置：

$(function(){
    // 设置表单验证规则
    $.formValidator.initConfig({
        formID:"form1", // 表单id
        onerror:function(msg){}, // 验证失败时的提示信息
        onsuccess:function(){}, // 验证成功时的回调函数
        debug:false // 使用调试模式
    });
    // 添加用户名验证规则
    $("#username").formValidator({
        onshow:"请输入5-20个字符作为用户名",
        onfocus:"",
        oncorrect:"输入正确"
    }).inputValidator({
        min:5,
        max:20,
        onerror:"请输入5-20个字符作为用户名"
    });
    // 添加密码验证规则
    $("#password").formValidator({
        onshow:"请输入6-20个字符作为密码",
        onfocus:"",
        oncorrect:"输入正确"
    }).inputValidator({
        min:6,
        max:20,
        onerror:"请输入6-20个字符作为密码"
    });
    // 添加邮箱验证规则
    $("#email").formValidator({
        onshow:"请输入正确的邮箱",
        onfocus:"",
        oncorrect:"输入正确"
    }).regexValidator({
        regexp:"email",
        onerror:"请输入正确的邮箱"
    });
    // 添加年龄验证规则
    $("#age").formValidator({
        onshow:"请输入正确的年龄",
        onfocus:"",
        oncorrect:"输入正确"
    }).inputValidator({
        min:1,
        max:100,
        onerror:"请输入正确的年龄"
    });
    // 添加性别验证规则
    $("#sex").formValidator({
        onshow:"请选择性别",
        onfocus:"",
        oncorrect:"选择正确"
    }).inputValidator({
        min:1,
        onerror:"请选择性别"
    });
    // 添加身份证号验证规则
    $("#identity").formValidator({
        onshow:"请输入身份证号",
        onfocus:"",
        oncorrect:"输入正确"
    }).regexValidator({
        regexp:"idcard",
        onerror:"请输入正确的身份证号"
    });
    // 触发表单验证
    $("#subBtn").click(function(){
        // 触发表单验证
        if(!$.formValidator.pageIsValid()){
            return;
        }
        // 如果验证通过，就执行提交操作
        $("#form1").submit();
    });
});

以上代码中，用户需要填写一些必填信息，如用户名、密码等。其中，身份证号码和邮箱需要匹配正则表达式，年龄和性别需要保证在一定范围内。这些验证规则使用了插件提供的多种验证器。

结语

以上是formValidator插件的使用攻略。使用这个插件可以有效地减少web开发者开发表单验证的时间和工作量。使用时需要根据自己的项目需求编写相应的验证规则，并对触发表单验证进行处理。