一、Validate插件描述

Validate是基于jQuery的一款轻量级验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML、CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证。

二、配置方法

需要先导入Jquery库,然后导入Validate插件。而且两个插件有一定的先后顺序。(jquery库-Validate插件)

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

js代码如下:

<script type="text/javascript">

$(function(){
$('#demoForm').validate({
rules:{
// 指的是input 的 name的名字
username:{
required:true,
minlength:6,
maxlength:9
},
password:{
required:true,
minlength:6,
maxlength:9
},
age:{
min:18,
max:80,
// range:[18,80],
//r angelength:[2,3],
digits:true
},
date:{
required:true,
dateISO:true,

}
},
messages:{
username:{
required:'此项必填',
minlength:'用户名最小是6位',
maxlength:'用户名最大是9位'
},
password:{
required:'此项必填',
minlength:'密码最小是6位',
maxlength:'密码最大是9位'
},
age:{
min:'最小18岁',
max:'最大80岁',
// range:'年龄必须是18-80之间',
// rangelength:'2-3位数',
digits:'年龄必须是正整数'
},
date:{
required:'必填',
dateISO:'日期格式不合法'
}
}
})
})
</script>

html代码如下:

<form id="demoForm">

<p>
<label for="user">username</label>
<input type="text" name="username" id="user"/>
</p>
<p>
<label for="pass">password</label>
<input type="text" name="password" id="pass"/>
</p>
<p>
<label for="age">age</label>
<input type="text" name="age" id="age"/>
</p>
<p>
<label for="date">date</label>
<input type="text" name="date" id="date"/>
</p>
<p>

<input type="submit" value="提交" id="btn"/>
</p>
</form>

解释一下代码:

$('#demoForm').validate({})表单元素来调用validate

rules:返回元素的验证规则 ,默认提示的错误信息是英文的

messages 处,可以自定义规则,如果某个控件没有 message,将调用默认的信息

默认校验规则:

1 required:true 必须输入的字段。
2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
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。

jquery.validata.js 插件的更多相关文章

  1. jquery.validata.js 插件2

    结合上面的,今天写一下validate的使用方法. validate()验证所选的form. validate 方法返回一个 Validator 对象.Validator 对象有很多方法可以用来引发校 ...

  2. 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)

    参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...

  3. jQuery.cookie.js插件了解及使用方法

    jquery.cookie.js插件实现浏览器的cookie存储,该插件是基于jquery开发,方便cookie使用. jquerycookie.js的下载地址 http://plugins.jque ...

  4. 购物车增加、减少商品时动画效果:jQuery.Fly.js插件使用方法

    某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图:      这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...

  5. jquery.autocomplete.js 插件的自定义搜索规则

    这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足!问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下: ...

  6. 异步上传图片,光用jquery不行,得用jquery.form.js插件

    异步上传图片,光用jquery不行,得用jquery.form.js插件,百度一下下载这个插件,加jquery,引入就可以了 <form id="postbackground" ...

  7. 整屏滚动效果 jquery.fullPage.js插件+CSS3实现

    最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...

  8. ajax请求执行完成后再执行其他操作(jQuery.page.js插件使用为例)

    就我们做知,ajax强大之处在于它的异步请求,但是有时候我们需要ajax执行彻底完成之后再执行其他函数或操作 这个时候往往我们用到ajax的回调函数,但是假如你不想或者不能把接下来的操作写在回调函数中 ...

  9. jquery.validate.js插件的使用方法

    近期做项目.须要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [样例例如以下] 1.前台页面 <form id="form1" ...

随机推荐

  1. 当KDS晶振遇上爱普生晶振国内生产厂家该如何抉择?

    当KDS晶振遇上爱普生晶振国内生产厂家该如何抉择?       全球做晶振行业的公司有很多,单说深圳一个城市就有几十上百家正规的晶振厂家,深圳市金洛电子就是其中之一.我们不光代理日本和台湾多家排得上名 ...

  2. 第 15 章 可扩展性设计之 Cache 与 Search 的利用

    前言: 前面章节部分所分析的可扩展架构方案,基本上都是围绕在数据库自身来进行的,这样是否会使我们在寻求扩展性之路的思维受到“禁锢”,无法更为宽广的发散开来.这一章,我们就将跳出完全依靠数据库自身来改善 ...

  3. mongoose populate

    mongoose具备关系数据库一样的关联查询,通过在schema模型中设置ref属性,然后在查询时使用populate关键字,可以达到关联查询的目的. 以下内容参考了mongoose官方文档http: ...

  4. ThinkPHP5.0版本和ThinkPHP3.2版本的区别

    5.0版本和之前版本的差异较大,本篇对熟悉3.2版本的用户给出了一些5.0的主要区别. URL和路由 5.0的URL访问不再支持普通URL模式,路由也不支持正则路由定义,而是全部改为规则路由配合变量规 ...

  5. Java IO流之文件流

    一.文件流分类 二.FileInputStream 三.FileOutputStream 四.FileReader 五.FileWriter 六.文件流应用 1,复制或剪切文件 2,读取文件信息 应用 ...

  6. IntelliJ IDEA 2017.1.4 x64配置说明

    只是为了研究下idea这款编译器怎么使用.开门见山,说下如何配置这款编译器,不配置也能用,但是强迫症表示不服.下面直入正题: 下载与安装就不说了,除了更改安装目录外,没啥注意的地方,建议下载idea去 ...

  7. std::forward_list

    forward_list相比list来说空间利用率更好,与list一样不支持随机访问,若要访问除头尾节点的其他节点则时间复杂度为线性. 在forward_list成员函数里只能访问头节点以及向头节点插 ...

  8. 借用mysql 或者其他数据库 处理MSSQL 2016前处理导入特殊字符

    MSSQL 2016支持了utf8编码的文件,之前处理比较麻烦的bcp 方式导入特殊字符一下子就方便了. 但是之前的版本,处理起来还是有一点麻烦.这次处理使用的数据库版本是sql server 201 ...

  9. 最近一个刚刚毕业的朋友说,他面试时候,遇到最频繁的css问题就是垂直居中,这里给出几种垂直居中方式!

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. PHP 防恶意刷新实现代码

    本质还是采用session方式进行时间比较,在单位时间内允许访问或者访问次数,如果有使用反向代理的话,也可以采用nginx配置 <?phpsession_start();  $k=$_GET[' ...