jQuery Validate密码验证的使用

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

1. 下载和引入validate.js

注意Validate的导入要在jQuery库之后。代码如下：

先导入jQuery库，然后导入Validate插件，如果是中文提示还需要导入messages_zh.js。

<script src="jQuery.1.8.3.js" type="text/javascript"></script>

<script src="jquery.validate.js" type="text/javascript"></script>

 <script src="messages_zh.js" type="text/javascript"></script>

Html

<form id="loginForm" οnsubmit="return false">

    <div>

        <label for="username">用户名</label>

        <input type="text" id="user" name="username" placeholder="请输入用户名">

    </div>

    <div>

        <label for="password">密码</label>

        <input type="password" id="pwd" name="password" placeholder="请输入密码">

    </div>

    <div >

        <label for="verify">验证码</label>

        <div>

            <input type="text" id="verify" name="verify" placeholder="请输入验证码">

        </div>

    </div>

    <button id="login" type="submit" class="btn btn-primary">

        登录

    </button>

</form>

Js

 $(document).ready(function () {

var icon = "<i class='fa fa-times-circle'></i> ";

 // 项目一开始就要初始化验证

    $("#loginForm").validate({

        errorElement: 'span',

        errorClass: 'error-block',

        onfocusout: function(element) { $(element).valid(); },

        rules: {

            username: {

                required: true

            },

            password: {

                required: true,

                passWord:true    // 和自定义验证相同

            },

            verify: {

                required: true

            }

        },

        messages: {

            username: {

                required: icon + "请输入您的用户名",

            },

            password: {

                required: icon + "请输入您的密码",

                passWord:icon + "请输入至少10位密码（至少包含1个字母，1个数字和1个特殊字符）",

            },

            verify: {

                required: icon + "请输入您的密码",

            }

        },

        submitHandler:function () {

            login()   //验证成功的提交事件

        }

    })

// 自定义密码验证

    jQuery.validator.addMethod("passWord", function(value, element) {

        var passWord = /^(?=.*?[A-Za-z])(?=.*?[0-9])(?=.*((?=[\x21-\x7e]+)[^A-Za-z0-9])).{10,}$/;

        return this.optional(element) || (passWord.test(value));

    }, "请输入至少10位密码（至少包含1个字母，1个数字和1个特殊字符）");

})

提示 form表格验证会提交，form要添加 οnsubmit=“return false” ,登录提交按钮改为 type="submit "

jQuery Validate密码验证 API

内置验证方式：

validate ()的可选项：

 **showErrors:**

$(".selector").validate({

   showErrors:function(errorMap,errorList) {

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

        this.defaultShowErrors();

   }

})

**errorPlacement:**

跟一个函数,可以自定义错误放到哪里

$("#myform").validate({

  rrorPlacement:function(error,element) { error.appendTo(element.parent("td").next("td"));

   },

   debug:true

})

**success:**

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

$("#myform").validate({

        success:"valid",

        submitHandler:function() { alert("Submitted!") }

})

**highlight:**

可以给未通过验证的元素加效果,闪烁等

默认的提示

messages: {

required: "This field is required.",

remote: "Please fix this field.",

email: "Please enter a valid email address.",

url: "Please enter a valid URL.",

date: "Please enter a valid date.",

dateISO: "Please enter a valid date (ISO).",

dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",

number: "Please enter a valid number.",

numberDE: "Bitte geben Sie eine Nummer ein.",

digits: "Please enter only digits",

creditcard: "Please enter a valid credit card number.",

equalTo: "Please enter the same value again.",

accept: "Please enter a value with a valid extension.",

maxlength: $.validator.format("Please enter no more than {0} characters."),

minlength: $.validator.format("Please enter at least {0} characters."),

rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),

range: $.validator.format("Please enter a value between {0} and {1}."),

max: $.validator.format("Please enter a value less than or equal to {0}."),

min: $.validator.format("Please enter a value greater than or equal to {0}.")

},

Query Validate提供了中文信息提示包，位于下载包的 dist/localization/messages_zh.js，只需将包引入到页面即可。

当然也可以自己设置messages来设置提示（例如开头的例子）。

4、更改错误信息显示的样式

设置错误提示的样式，可以增加图标显示，在该系统中已经建立了一个validation.css专门用于维护校验文件的样式

也可以通过设置errorClass，errorElement给提示设置不同的报错信息

复制代码

input.error { border: 1px solid red; }

label.error {

background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;

padding-left: 16px;

padding-bottom: 2px;

font-weight: bold;

color: #EA5200;

}

label.checked {

background:url("./demo/images/checked.gif") no-repeat 0px 0px;

}

每个字段验证通过执行函数

success：String,Callback

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

success: function(label) {

    // set   as text for IE

    label.html(" ").addClass("checked");

    //label.addClass("valid").text("Ok!")

}

6、验证的触发方式修改

onsubmit：Boolean Default: true

提交时验证. 设置唯false就用其他方法去验证

onfocusout：Boolean Default: true

失去焦点是验证(不包括checkboxes/radio buttons)

onkeyup：Boolean Default: true

在keyup时验证.

onclick：Boolean Default: true

在checkboxes 和 radio 点击时验证

focusInvalid：Boolean Default: true

提交表单后，未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点

focusCleanup：Boolean Default: false

如果是true那么当未通过验证的元素获得焦点时，移除错误提示。避免和focusInvalid一起用

7、异步验证

remote：URL

使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项

复制代码

示例一：

remote: "check-email.jsp"

示例二：

remote: {

    url: "check-email.jsp",     //后台处理程序

    type: "post",               //数据发送方式

    dataType: "json",           //接受数据格式   

    data: {                     //要传递的数据

        username: function() {

            return $("#username").val();

        }

    }

}

远程地址只能输出"true"或"false"，不能有其它输出。

8、添加自定义校验

addMethod：name, method, message
自定义验证方法

// 中文字两个字节

jQuery.validator.addMethod(

    "byteRangeLength",

    function(value, element, param) {

        var length = value.length;

        for(var i = 0; i < value.length; i++){

            if(value.charCodeAt(i) > 127){

                length++;

            }

        }

        return this.optional(element) || (length >= param[0] && length <= param[1]);   

    },

    $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)")

);

// 邮政编码验证   

jQuery.validator.addMethod("isZipCode", function(value, element) {   

    var tel = /^[0-9]{6}$/;

    return this.optional(element) || (tel.test(value));

}, "请正确填写您的邮政编码");

// 手机号码验证

jQuery.validator.addMethod("mobile", function(value, element) {

    var length = value.length;

    var mobile =  /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/

    return this.optional(element) || (length == 11 && mobile.test(value));

}, "手机号码格式错误");  

// 电话号码验证   

jQuery.validator.addMethod("phone", function(value, element) {

    var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;

    return this.optional(element) || (tel.test(value));

}, "电话号码格式错误");

// 邮政编码验证   

jQuery.validator.addMethod("zipCode", function(value, element) {

    var tel = /^[0-9]{6}$/;

    return this.optional(element) || (tel.test(value));

}, "邮政编码格式错误");

// QQ号码验证   

jQuery.validator.addMethod("qq", function(value, element) {

    var tel = /^[1-9]\d{4,9}$/;

    return this.optional(element) || (tel.test(value));

}, "qq号码格式错误");

// IP地址验证

jQuery.validator.addMethod("ip", function(value, element) {

    var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)/;     return this.optional(element) || (ip.test(value) && (RegExp./;     return this.optional(element) || (ip.test(value) && (RegExp.1 < 256 && RegExp.2 < 256 && RegExp.2 < 256 && RegExp.3 < 256 && RegExp.$4 < 256));

}, "Ip地址格式错误");

// 字母和数字的验证

jQuery.validator.addMethod("chrnum", function(value, element) {

    var chrnum = /^([a-zA-Z0-9]+)$/;

    return this.optional(element) || (chrnum.test(value));

}, "只能输入数字和字母(字符A-Z, a-z, 0-9)");

// 中文的验证

jQuery.validator.addMethod("chinese", function(value, element) {

    var chinese = /^[\u4e00-\u9fa5]+$/;

    return this.optional(element) || (chinese.test(value));

}, "只能输入中文");

// 下拉框验证

$.validator.addMethod("selectNone", function(value, element) {

    return value == "请选择";

}, "必须选择一项");

// 字节长度验证

jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {

function(){ //黄金代码 http://www.kaifx.cn/mt4/kaifx/1805.html

    var length = value.length;

    for (var i = 0; i < value.length; i++) {

        if (value.charCodeAt(i) > 127) {

            length++;

        }

    }

    return this.optional(element) || (length >= param[0] && length <= param[1]);

}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));

1.要在additional-methods.js文件中添加或者在jquery.validate.js添加建议一般写在additional-methods.js文件中

2.在messages_cn.js文件添加：isZipCode: “只能包括中文字、英文字母、数字和下划线”,调用前要添加对additional-methods.js文件的引用。

9、radio和checkbox、select的验证

复制代码

1.radio的required表示必须选中一个

<input  type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />

<input  type="radio" id="gender_female" value="f" name="gender"/>

checkbox的required表示必须选中

<input type="checkbox" id="agree" name="agree" class="{required:true}" />

checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间

<input type="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />

<input type="checkbox" id="spam_phone" value="phone" name="spam[]" />

<input type="checkbox" id="spam_mail" value="mail" name="spam[]" />

select的required表示选中的value不能为空

<select id="jungle" name="jungle" title="Please select something!" class="{required:true}">

    <option value=""></option>

    <option value="1">Buga</option>

    <option value="2">Baga</option>

    <option value="3">Oi</option>

</select>

select的minlength表示选中的最小个数（可多选的select）,maxlength表示最大的选中个 数,rangelength:[2,3]表示选中个数区间

<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">

    <option value="b">Banana</option>

    <option value="a">Apple</option>

    <option value="p">Peach</option>

    <option value="t">Turtle</option>

</select>

10.可以设置validate的默认值

如果有两个或者多个表格验证，可以设置默认值

$.validator.setDefaults({

errorElement: ‘span’,

errorClass: ‘error-block’,

submitHandler: function(form) { alert(“submit!”); form.submit(); }

});