强大的jquery表单验证插件1. html代码 . Css代码 3. Js代码 .

[

简单介绍
]

:form

表单验证是网站建设中

前端必须做的事情之一

而要自己想一个玩美的没有

bug

的表单验证

是非常不容易的

这里给大家分享一个基于

jquery

的强大的表单验证插件

几乎可以满足我们对表单验证的需求

如果你的网站不可使用

jquery,

那很抱歉

你无法使用这个插件

jquery validate
表单验证如何调用

在引入

jquery validate

插件前，需要先引入它所依赖的文件

jquery.js

[HTML]

纯文本查看

复制代码

<script src="jquery-1.8.2.min.js"></script>

<script src="jquery.validate.js"></script>

一、关键代码介绍

1. html代码

[HTML]

纯文本查看

复制代码

<form action="js/test.json" method="post" class="bl-form bl-formhor" id="jsForm">

<ul>

<li class="bl-form-group">

<label><em>*</em>必填：</label>

<div class="controls">

<input id="pwdid" class="fn-tinput" data-rule-remote="http://www.baidu.com" type="password" name="OldPassword" placeholder="原始密码" required data-msg-required="请输入原始密码" minlength="6" data-msg-minlength="至少输入6个字符" />

</div>

</li>

<li class="bl-form-group">

<label>手机：</label>

<div class="controls">

<input type="text" value="" name="3" class="fn-tinput" placeholder="手机号" required data-rule-mobile="true" data-msg-required="请输入手机号" data-msg-mobile="请输入正确格式" />

</div>

</li>

………….

<li class="bl-form-group bl-form-btns">

<label class="fn-vhid">提交：</label>

<div class="controls">

<button class="fn-btn btn-primary btn-submit submitBtn" type="submit">提交按钮</button>

<button type="reset" class="fn-btn">重置</button>

</div>

</li>

</ul>

</form>

. Css代码

表单的样式是随手写了一下，只是看起来稍微好看一点，样式不是重点，验证规则与书写方法和样式无关，可以自行定义

3. Js代码

[JavaScript]

纯文本查看

复制代码

$(function(){

//$('.jsForm') 是你的表单的类名或者 id，如果是id的话就是 $('#jsForm')

//submitHandler 就是表单验证通过的时候执行里面的函数

$('.jsForm').validate({

submitHandler: function (form) {

var $form = $(form),

data = $form.serialize(); //序列化表单数据

//这里是jquery表单验证通过的时候执行的操作，比如这里，表单验证通过的时候执行了jquery的ajax的post操作

$.post('js/test.json',{data:data},function(d){

if(d.Flag){

alert("如果返回为真，将执行这里代码")

}else{

}

},'json');

},

onfocusout: function(element){ //这个设置是,让表单元素失去焦点后,就验证, 如果不需要,则删掉

$(element).valid();

}

});

})

二、

jquery validate

默认验证规则的提示语中文化

因为

jquery validate

插件中的提示词，默认是英文的，所以我们先把它中文化

$.extend($.validator.messages, {

required: "

必填

remote: "

请修正该字段

email: "

电子邮件格式不正确

url: "

网址格式不正确

date: "

日期格式不正确

dateISO: "

请输入合法的日期

(ISO).",

number: "

请输入数字

digits: "

只能输入整数

creditcard: "

请输入合法的信用卡号

equalTo: "

请再次输入相同的值

accept: "

请输入拥有合法后缀名的字符

maxlength: $.validator.format("

请输入一个

长度最多是

{0}

的字符

"),

minlength: $.validator.format("

请输入一个

长度最少是

{0}

的字符

"),

rangelength: $.validator.format("

请输入

一个长度介于

{0}

和

{1}

之间的字符

"),

range: $.validator.format("

请输入一个介于

{0}

和

{1}

之间的值

"),

max: $.validator.format("

请输入一个最大为

{0}

的值

"),

min: $.validator.format("

请输入一个最小为

{0}

的值

});

三、
validate
默认的验证规则中文解释

(1)required:true

必输字段

(2)remote:”check.php”使用ajax方法调用check.php验证输入值

(3)email:true 必须输入正确格式的电子邮件

(4)url:true 必须输入正确格式的网址

(5)date:true 必须输入正确格式的日期

(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性

(7)number:true 必须输入合法的数字(负数，小数)

(8)digits:true 必须输入整数

(9)creditcard: 必须输入合法的信用卡号

(10)equalTo:”#field” 输入值必须和#field相同

(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）

(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)

(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)

(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符)

(15)range:[5,10] 输入值必须介于 5 和 10 之间

(16)max:5 输入值不能大于5

(17)min:10 输入值不能小于10

validate

的默认验证规则是什么意思？

假如，一个表单元素的要求是必填，那么就在这个表单元素中加一个required 属性

如果这个元素没有填写内容，就会出现提示词

四
.
自定义
validate
表单验证规则

addMethod(name,method,message)

方法：

参数name 是添加的方法的名字

参数method是一个函数,接收三个参数(value,element,param) value 是元素的值,element是元素本身 param是参数

以手机号码验证规则为例：

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

var mobile = /^1[3|4|5|7|8]\d{9}$/;

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

}

那么在表单元素中的属性设置为

data-msg-mobile=

“提示信息”

更多技术资讯可关注：gzitcast