Jquery-05表单验证插件-validation

一款优秀的表单验证插件——validation插件

特点：

内置验证规则：拥有必填、数字、email、url和信用卡号码等19类内置验证规则
自定义验证规则：可以很方便的自定义验证规则
简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能
实时验证：可以通过keyup或bulr事件触发验证，而不仅仅在表单提交的时候验证。

1表单校验
1. 案例介绍

在学习JavaScript时，我们手动的完成过表单数据的校验，此功能在开发中非常常见，属于通用功能范畴，实际开发一般使用都是第三方工具。本案例我们将使用jQuery插件validation进行表单的校验。

1. 案例相关知识：validation校验
  1. 下载
官网地址：http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip
帮助文档位置：http://jqueryvalidation.org/documentation/
目录结构：

1. 1. 导入

validate是jQuery插件，及必须在jQuery的基础上进行运行。我们将导入jQuery库、validate库、和国际化资源库（可选）

1. 1. 使用前提

validate需要手动的声明，对那个表单进行校验，及需要手动调用validate()方法。

$(function () {

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

});

</script>

校验类型	取值	描述
required	true\|false	必填字段
email	email	邮件地址
url		路径
date	数字	日期
dateISO	字符串	日期（YYYY-MM-dd）
number		数字（负数，小数）
digits		整数
minlength	数字	最小长度
maxlength	数字	最大长度
rangelength	[minL,maxL]	长度范围
min		最小值
max		最大值
range	[min,max]	值范围
equalTo	jQuery表达式	两个值相同
remote	url路径	ajax校验

1. 检验方式：js 代码方式

语法：

$(…).validate({

rules:{},

messages:{}

});

rules 规则语法：

rules:{

字段名:校验器,

字段名:校验器

}

校验器语法：

语法：{校验器:值,校验器:值,...}

message 提示语法：

message:{

字段名:{校验器:"提示",校验器:"提示",...}

}

$("#formId").validate({

rules:{

username:{

required:true

password:{

required:true,

rangelength:[2,5]

repassword:{

equalTo:"[name='password']"

}

messages:{

username:{

required:"不能为空"

password:{

rangelength:"长度{0}-{1}之间"

}

});

1. 案例实现
js代码

$().ready(function () {

$("#formId").validate({

rules:{

loginname:{

required:true,

minlength:2,

maxlength:5

loginpwd:{

required:true,

number:true

reloginpwd:{

equalTo:"[name='loginpwd']"

email:"email",

username:{

required:true,

rangelength:[2,5]

gender:{

required:true

}

messages:{

gender:{

required:"性别必须勾选"

}

});

</script>

html代码

<input type="radio" name="gender" value="男" />男

<input type="radio" name="gender" value="女" />女

<!--在指定位置显示错误信息

* class 必须是error

* for 必须设置错误对象

-->

1. 高级：自定义校验
  1. 概述

jquery.validate.js jQuery插件，对jQuery进行增强，添加了validate()函数，用于对表单进行校验。validate()函数内部，调用的是$.validator定义函数进行处理，如果希望自定义校验规则，需要使用$.validator.addMethod完成。

$.validator.addMethod(name , method , message);

参数1：name，校验规则的名称。例如：required

参数2：method，执行校验时使用的处理函数。返回true表示校验通过，返回false表示校验未通过。

function(value , element , params ){} ,处理函数被调用时，可以获得3个参数。

参数value：表单项的value值。例如：<input value="">

参数element：被校验的表单项对象。

参数params：使用当前校验规则传递的值。例如：rules : { 参数1Method : 参数params }

参数3：message，校验未通过时的提示信息。

1. 1. 提供表单

<table>

<tr>

<font color="#3164af">会员注册</font> USER REGISTER

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

</table>

</form>

1. 1. 编写自定义校验规则
先注册校验规则：长度校验器 cardlength

/* 1）校验规则名称：cardlength

* 2）校验处理函数：fn(value , element , params)

* * value : 当前文本框输入的内容

* * element : 当前文本框

* * params : 校验的具体参数，[15,18]

* 3）校验提示信息：身份证长度必须是{0}或{1}

* * {0} 可以获得 params第一个参数

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

if(value.length==15 || value.length==18){

return true;//校验通过

}

return false;//未通过

},"身份证长度必须是{0}或{1}");

先注册校验规则：

/* 如果参数为true进行校验，如果参数为false不进行校验。

* * 进行校验时，长度15：都是数字；长度18：都是数字或末尾为X或x

* 1）校验规则名称：cardformat

* 2）校验处理函数：fn(value , element , params)

* * value : 当前文本框输入的内容

* * element : 当前文本框

* * params : 校验的具体参数，true

* 3）校验提示信息：身份证格式不正确

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

// 参数必须是boolean

if(typeof params != "boolean"){

return false;

}

//参数为true，需要进行校验

if(params){

if(value.length==15){

//15位：都是数字

var reg1 = new RegExp("^[0-9]{15}$");

return reg1.test(value);

}else if(value.length==18){

//18位：都是数字或末尾是X

var reg2 = new RegExp("^[0-9]{18}|[0-9]{17}[X|x]$");

return reg2.test(value);

}

// 格式不符合

return false;

}

//参数为false，不需要进行校验

return true;

},"身份证格式不正确");

使用校验规则

$("#formId").validate({

rules:{

username:{

required:true,

rangelength:[5,8]

card:{

required:true,

cardlength:[15,18],

cardformat:true

}

});

1. 1. 编写自定义提示

$("#formId").validate({

rules:{

username:{

required:true,

rangelength:[5,8]

card:{

required:true,

cardlength:[15,18],

cardformat:true

}

messages:{

username:{

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

rangelength:"用户名的长度是5到8"

card:{

required:"身份证必须写",

cardlength:"身份证长度{0}位或{1}位",

cardformat:"身份证的格式不正确"

}

});

案例代码:

<!DOCTYPE html>

<html>

<head>

<title>我的jquery表单校验页面</title>

p{text-align: center;font-size:24px;}

table{margin: 0 auto;border: 0;}

table tr{height:40px;border:0;}

table tr td{padding:0 14px;border:1px solid #999}

.error{color:red}

</style>

$(function(){

// 自定义身份证长度

$.validator.addMethod("cartLength",

function(value, element , params){

//console.info("value : " + value); // 用户填写的值

//console.info("element : " + element); // 身份证标签对象

//console.info("params : " + params);// 规则的值

// 判断如果长度是15位或18位都是合法的

if(value.length==15 || value.length==18){

return true;

}

return false;

}, "身份证长度必须是{0}位或{1}位!");

// 定义身份证的格式: 15位(都是数字) 18位(1 全是数字, 2 17位数字+X|)

$.validator.addMethod("cartFormate",

function(value , element , params ){

// 1 规则值必须是boolean类型 ture:校验, false:不校验

// 如果不是boolean类型提示错误

if(typeof params != "boolean"){

return false;

}

// 2 如果规则值为true,开始校验

if(params) {

// 2.1 如果是15位, 要求全是数字

if(value.length == 15) {

var reg = new RegExp("^[0-9]{15}$");

return reg.test(value);

}

// 2.2 如果是18位, 要么全是数字, 要么 17位数字+X|x是合法

if(value.length == 18) {

var reg2 = new RegExp("^[0-9]{18}|[0-9]{17}[X|x]$");

return reg2.test(value);

}

// 2.3 其他非法,提示错误

return false;

}

// 3 如果规则值不是true, 表示不需要校验,直接通过

return true;

}, "身份证的格式不正确!");

$("#empForm").validate({

rules:{

realname : "required",

username : {

required : true,

minlength : 5,

maxlength : 8

psw : {

required : true,

rangelength : [6,12]

psw2 : {

required : true,

rangelength : [6,12],

equalTo : "#psw"

gender : "required",

age : {

required : true,

range : [26, 50]

edu : "required",

birthday : {

required : true,

date : true

checkbox1 : "required",

email : {

required: true,

email : true

cart : {

"cartLength" : [15, 18],

"cartFormate" : true

}

messages:{

realname : "真实姓名不能为空!",

username : {

required : "登录名不能为空!",

minlength : "登录名最小长度是5!",

maxlength : "登录名最大长度是8!"

psw : {

required : "密码不得为空!",

rangelength : "密码必须是{0}-{1}字符或数字!"

psw2 : {

required : "确认密码不得为空!",

rangelength : "确认密码必须是{0}-{1}字符或数字!",

equalTo : "确认密码和密码不一致!"

gender : "性别是必选项!",

age : {

required : "年龄是必填项!",

range : "年龄范围是{0}岁~{1}岁"

edu : "学历是必填项!",

birthday : {

required : "生日不得为空!",

date : "生日格式不正确!"

checkbox1 : "爱好是必选项!",

email : {

required: "邮箱是必填项!",

email : "邮箱格式不正确!"

}

});

</script>

</head>

<body>

<p>员工信息录入</p>

<tr>

<td>真实姓名(不能为空 ,没有其他要求)</td>

</td>

</tr>

<tr>

<td>登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</td>

</tr>

<tr>

<td>密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>

</tr>

<tr>

<td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>

</tr>

<tr>

<td>

<input type="radio" id="gender_male" value="m" name="gender"/> 男  

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

</td>

</tr>

<tr>

</tr>

<tr>

<option value="">－请选择你的学历－</option>

</select>

</td>

</tr>

<tr>

</tr>

<tr>

<input type="checkbox" name="checkbox1" id="qq1"/> 乒乓球  

<input type="checkbox" name="checkbox1" id="qq2" value="1" /> 羽毛球  

<input type="checkbox" name="checkbox1" id="qq3" value="2" /> 上网  

<input type="checkbox" name="checkbox1" id="qq4" value="3" /> 旅游  

<input type="checkbox" name="checkbox1" id="qq5" value="4" /> 购物  

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</script>

</body>

</html>

下载：

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

快速入门：

第一步：引入jquery库和validation插件

案例：

$(function(){

$("#registForm").validate({

rules:{

user:{

required:true,

minlength:2

password:{

required:true,

digits:true,

minlength:6

repassword:{

required:true,

digits:true,

minlength:6,

equalTo:"[name='password']"

email:{

required:true,

email:true

username:{

required:true,

minlength:2

sex:{

required:true

}

messages:{

user:{

required:"用户名不能为空!",

minlength:"用户名不得少于2个字符!"

password:{

required:"密码不能为空!",

digits:"密码必须是数字!",

minlength:"密码长度不得低于6位!"

repassword:{

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

digits:"密码必须是数字!",

minlength:"密码长度不得低于6位!",

equalTo:"两次密码不一致!"

email:{

required:"邮箱不能为空!",

email:"邮箱格式不正确!"

username:{

required:"姓名不能为空!",

minlength:"姓名不得少于2个字符!"

sex:{

required:"性别必须勾选!"

}

errorElement: "label", //用来创建错误提示信息标签

success: function(label) { //验证成功后的执行的回调函数

//label指向上面那个错误提示信息标签label

label.text(" ") //清空错误提示消息

.addClass("success"); //加上自定义的success类

}

});

})

</script>

Jquery-05表单验证插件-validation

猜你喜欢