jQuery Validate 表单验证 — 用户注册简单应用

时间：2022-11-21 21:22:08

相信很多coder在表单验证这块都是自己写验证规则的，今天我们用jQuery Validate这款前端验证利器来写一个简单的应用。

可以先把我写的这个小demo运行试下，先睹为快。猛戳链接--》，http://pan.baidu.com/s/1o8zVdoQ

1.Demo讲解（validate参数见第3点）

1.1 Validate 要依赖jQuery的，所以HTML中js的引用关系如下：

        <script type="text/javascript" src="../js/common/jquery-1.11.0.js" ></script>

        <script type="text/javascript" src="../js/common/jquery-validation-1.14.0/jquery.validate.min.js" ></script>

        <script type="text/javascript" src="../js/common/jquery-validation-1.14.0/additional-methods-common.js" ></script>

        <script src="../js/controller/blog-validate.js" type="text/javascript" charset="utf-8"></script>

第一个就不用说了，第二个是验证插件（必须引用），第三个是自定义验证规则，第四个我们自己的js

1.2 注册form的结构：

jQuery Validate 表单验证 — 用户注册简单应用

<form class="am-form am-form-horizontal yf-form-tips add-form">

                <div class="am-form-group am-g-collapse">

                    <label for="addFormName" class="am-u-sm-2 am-form-label">用户名: </label>

                    <div class="am-u-sm-10 yf-pl10">

                        <input type="text" id=""  name="addFormName" placeholder="请输入您的用户名" class="" maxlength="20">

                        <span class="yf-error-tip"></span>

                    </div>

                </div>

                <div class="am-form-group am-g-collapse">

                    <label for="addFormName" class="am-u-sm-2 am-form-label">密码: </label>

                    <div class="am-u-sm-10 yf-pl10">

                        <input type="password" id="password1"  name="addFormPass1" placeholder="请输入您的密码" class="" maxlength="20">

                        <span class="yf-error-tip"></span>

                    </div>

                </div>

                <div class="am-form-group am-g-collapse">

                    <label for="addFormName" class="am-u-sm-2 am-form-label">确认密码: </label>

                    <div class="am-u-sm-10 yf-pl10">

                        <input type="password" id=""  name="addFormPass2" placeholder="请再次输入您的密码" class="" maxlength="20">

                        <span class="yf-error-tip"></span>

                    </div>

                </div>

                <div class="am-form-group am-g-collapse">

                    <label for="addFormPhone" class="am-u-sm-2 am-form-label">手机号: </label>

                    <div class="am-u-sm-10 yf-pl10">

                        <input type="text" id=""  name="addFormPhone" placeholder="请输入您的手机号" class="" maxlength="11">

                        <span class="yf-error-tip"></span>

                    </div>

                </div>

                <div class="am-form-group am-g-collapse">

                    <label for="addFormAdd" class="am-u-sm-2 am-form-label am-vertical-align-top yf-pt0">联系地址: </label>

                    <div class="am-u-sm-10 yf-pl10">

                        <textarea id="" placeholder="请输入您的联系地址" name="addFormAdd"  class="" maxlength="100"></textarea>

                        <span class="yf-error-tip"></span>

                    </div>

                </div>

                <div class="am-form-group am-g-collapse">

                    <div class="am-u-sm-offset-2 yf-pl10">

                        <button type="submit" class="am-btn am-btn-primary" onclick="submitInfo()">提交</button>

                    </div>

                </div>

            </form>

1.3 主要的js(blog-validate.js)：

    //表单验证规则

    var formValid = $(".add-form").validate({

        rules: {

            "addFormName":{

                "required":true,        //必填字段

            },

            "addFormPass1":{

                "required":true

            },

            "addFormPass2":{

                "required":true,

                "equalTo": "#password1"        //输入值必须和 #password1 相同

            },

            "addFormPhone":{

                "required":true,

                "digits":true,        //必须输入整数

                "minlength":11        //输入长度最小是 11

            },

            "addFormAdd":{

                "required":true

            }

        },

        messages: {

            "addFormName":{

                "required":"用户名不能为空哦"

            },

            "addFormPass1":{

                "required":"密码不能为空哦"

            },

            "addFormPass2":{

                "required":"确认密码不能为空哦",

                "equalTo":"两次输入的密码不一致哦"

            },

            "addFormPhone":{

                "required":"手机号不能为空哦",

                "digits":"手机号格式不正确哦",

                "minlength":"手机号格式不正确哦",

            },

            "addFormAdd":{

                "required":"地址不能为空哦"

            }

        },

        errorPlacement:function(error,element) {

            error.appendTo(element.siblings(".yf-error-tip"));

        }

    });

    //提交前开始验证

    var submitInfo = function(){

        if($('.add-form').valid()){

            alert('恭喜你，验证通过了！');

        };

    }

说明：

　　主要通过 $('.add-form').valid() 触发验证；

　　提示信息可在 errorPlacement 中配置放置的位置，提示默认的样式是"error"，如需修改，参考validate ()可选项中的"errorClass"

2.有几个特别要注意的地方：

  1. validate ()的对象$(".add-form")对应的DOM标签必须是form标签
  2. 执行$(".add-form").validate 时，form在HTML结构中是存在的，类似jquery的remove之后或者angularJs的ngIf，都会导致验证失败
  3. validate ()的属性"rules"必须对应验证表单中标签的name属性
  4. 验证规则可以直接写在HTML中（不推荐，提示信息也不好处理），比如：
<input type="text" id=""  name="addFormName" placeholder="请输入您的用户名" class="" maxlength="20" required minlength='2'>

3.Validate官方标准

3.1 Validate的默认校验规则

名称 返回类型 描述
required() Boolean 必填验证元素。
required(dependency-expression) Boolean 必填元素依赖于表达式的结果。
required(dependency-callback) Boolean 必填元素依赖于回调函数的结果。
remote(url) Boolean 请求远程校验。url 通常是一个远程调用方法。
minlength(length) Boolean 设置最小长度。
maxlength(length) Boolean 设置最大长度。
rangelength(range) Boolean 设置一个长度范围 [min,max]。
min(value) Boolean 设置最小值。
max(value) Boolean 设置最大值。
email() Boolean 验证电子邮箱格式。
range(range) Boolean 设置值的范围。
url() Boolean 验证 URL 格式。
date() Boolean 验证日期格式（类似 30/30/2008 的格式，不验证日期准确性只验证格式）。
dateISO() Boolean 验证 ISO 类型的日期格式。
dateDE() Boolean 验证德式的日期格式（29.04.1994 或 1.1.2006）。
number() Boolean 验证十进制数字（包括小数的）。
digits() Boolean 验证整数。
creditcard() Boolean 验证信用卡号。
accept(extension) Boolean 验证相同后缀名的字符串。
equalTo(other) Boolean 验证两个输入框的内容是否相同。
phoneUS() Boolean 验证美式的电话号码

3.2 validate ()的可选项

描述

代码

debug：进行调试模式（表单不提交）。

$(".selector").validate({

debug:true})

把调试设置为默认。

$.validator.setDefaults({

debug:true})

submitHandler：通过验证后运行的函数，里面要加上表单提交的函数，否则表单不会提交。

$(".selector").validate({

submitHandler:function(form) {

$(form).ajaxSubmit();

}})

ignore：对某些元素不进行验证。

$("#myform").validate({

ignore:".ignore"})

rules：自定义规则，key:value 的形式，key 是要验证的元素，value 可以是字符串或对象。

$(".selector").validate({

rules:{

name:"required",

email:{

required:true,

email:true

}

}})

messages：自定义的提示信息，key:value 的形式，key 是要验证的元素，value 可以是字符串或函数。

$(".selector").validate({

rules:{

name:"required",

email:{

required:true,

email:true

}

},

messages:{

name:"Name不能为空",

email:{

required:"E-mail不能为空",

email:"E-mail地址不正确"

}

}})

groups：对一组元素的验证，用一个错误提示，用 errorPlacement 控制把出错信息放在哪里。

$("#myform").validate({

groups:{

username:"fname

lname"

},

errorPlacement:function(error,element) {

if (element.attr("name") == "fname" || element.attr("name") == "lname")

error.insertAfter("#lastname");

else

error.insertAfter(element);

},

debug:true})

OnSubmit：类型 Boolean，默认 true，指定是否提交时验证。

$(".selector").validate({

onsubmit:false})

onfocusout：类型 Boolean，默认 true，指定是否在获取焦点时验证。

$(".selector").validate({

onfocusout:false})

onkeyup：类型 Boolean，默认 true，指定是否在敲击键盘时验证。

$(".selector").validate({

onkeyup:false})

onclick：类型 Boolean，默认 true，指定是否在鼠标点击时验证（一般验证 checkbox、radiobox）。

$(".selector").validate({

onclick:false})

focusInvalid：类型 Boolean，默认 true。提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点。

$(".selector").validate({

focusInvalid:false})

focusCleanup：类型 Boolean，默认 false。当未通过验证的元素获得焦点时，移除错误提示（避免和 focusInvalid 一起使用）。

$(".selector").validate({

focusCleanup:true})

errorClass：类型 String，默认 "error"。指定错误提示的 css 类名，可以自定义错误提示的样式。

$(".selector").validate({

errorClass:"invalid"})

errorElement：类型 String，默认 "label"。指定使用什么标签标记错误。

$(".selector").validate

errorElement:"em"})

wrapper：类型 String，指定使用什么标签再把上边的 errorELement 包起来。

$(".selector").validate({

wrapper:"li"})

errorLabelContainer：类型 Selector，把错误信息统一放在一个容器里面。

$("#myform").validate({

errorLabelContainer:"#messageBox",

wrapper:"li",

submitHandler:function() {

alert("Submitted!")

}})

showErrors：跟一个函数，可以显示总共有多少个未通过验证的元素。

$(".selector").validate({

showErrors:function(errorMap,errorList) {

$("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");

this.defaultShowErrors();

}})

errorPlacement：跟一个函数，可以自定义错误放到哪里。

$("#myform").validate({

errorPlacement:function(error,element) {

error.appendTo(element.parent("td").next("td"));

},

debug:true})

success：要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数。

$("#myform").validate({

success:"valid",

submitHandler:function() {

alert("Submitted!")

}})

highlight：可以给未通过验证的元素加效果、闪烁等。

更多的用法讲解，大家可以参考validate官网，或者菜鸟教程。

相关文章