jquery插件-表单验证插件
JQuery 插件概述：
插件（plugin）也被成为扩展，是一种遵循一定规范的应用程序编写出来的程序，JQuery有大量
现成的插件。
一句话，JQuery插件就是别人依照Jquery官方规范写好的各种功能，我们可以拿过来直接用，而不需要再去写。
jquery-validation-1.15.0
下载链接http://jqueryvalidation.org/
这个插件有三个主要方法
1、validate()
用于验证表单，也是该插件最核心的方法
2、valid()
验证表单是否通过
3、rules()
为一个表单控件、查看、新增、移除规则
增加了一些选择器
:blank
选择所有没有值或者值为空白的表单控件
:filled
选择所有填写了非空值的表单控件
:unchecked
与JQuery提供的:checked选择器相反
配置选项
1）rules：为各种表单添加验证规则
$("form1").validate({
rules{
控件1：{
验证规则1，验证规则2，验证规则3，验证规则4
},
控件2：{
验证规则1，验证规则2，验证规则3，验证规则4
......
},
......
}
});
在validation的包里面找到了了一个本地化的文件里面应该是所有的规则了
$.extend( $.validator.messages, {
required: "这是必填字段",
remote: "请修正此字段",
email: "请输入有效的电子邮件地址",
url: "请输入有效的网址",
date: "请输入有效的日期",
dateISO: "请输入有效的日期 (YYYY-MM-DD)",
number: "请输入有效的数字",
digits: "只能输入数字",
creditcard: "请输入有效的信用卡号码",
equalTo: "你的输入不相同",
extension: "请输入有效的后缀",
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} 的数值" )
} );
使用：
1) required：
name属性值:'required'
2) minlength
说明：最小字符长度
使用: minlength:数字
3) maxlength
说明：最大字符长度
使用：maxlength：数字
4) rangelength
说明：字符长度必须介于某个区间
使用：rangelength:[5,10]
5) min
说明：输入的最小值
使用：min:5
6) max
说明：输入的最大值
使用max:10
7) range
说明：输入的值必须介于某个区间
使用：range:[5,10]
8) number
说明：必须是合法数字
使用：number:true
9)digits:
说明：必须是整数
使用：digits：true
10) email
说明：必须是email正确格式的电子邮件
使用：email：true
11) url
说明：必须输入正确格式的网址
使用：url：true
12) equalTo
说明：输入值必须和给定选择器的字段的值相同
使用：equalTo:'选择器'
13)remote
使用：ajax方法调用服务器断脚本，验证输入值
使用：remote：'服务器端脚本'
例如：remote: check.php默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项
remote：{
url:'checkPassword.do',
type:'post',
data:{
username:'qwerty',
password:'123456'
}
}
参数与值和$.ajax方法相同
还有一些验证规则需要引入additional-methods.min.js,这里面添加了很多验证规则，
14) extension
说明：验证上传的文件的后缀名
使用：extension:合法的后缀名（不带点），多个的后缀明之间用竖线隔开
例如:extension:'cpp|java'
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.12.1.js"></script>
<script type="text/javascript" src="../js/validation/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#form1").validate({
rules: {
field1:{
required:true
/*如果只有一个验证规则则可以
field：'required',就不需要用对象了*/
},
field2:{
required:true
},
field3:{
required:true,
//要验证minlength则必须加上required规则
//否则它就不验证
minlength:2,
maxlength:6
},
field4:{
required:true,
rangelength:[4,6]
},
field5:{
required:true,
min:5,
max:10
},
field6:{
required:true,
range:[5,10]
},
field7:{
required:true,
number:true
},
field8:{
required:true,
digits:true
},
field9:{
required:true,
email:true
},
field10:{
required:true,
url:true
},
field11:{
equalTo:'input[name="field6"]' }
}
});
});
</script>
<style type="text/css">
form {
margin: 10px 100px 10px 100px;
}
</style>
</head>
<body>
<form id="form1">
<div>
field1:<input type="text" name="field1" />
</div>
<div>
field2:<input type="text" name="field2" />
</div>
<div>
field3:<input type="text" name="field3" />
</div>
<div>
field4:<input type="text" name="field4" />
</div>
<div>
field5:<input type="text" name="field5" />
</div>
<div>
field6:<input type="text" name="field6" />
</div>
<div>
field7:<input type="text" name="field7" />
</div>
<div>
field8:<input type="text" name="field8" />
</div>
<div>
field9:<input type="text" name="field9" />
</div>
<div>
field10:<input type="text" name="field10" />
</div>
<div>
field11:<input type="text" name="field11" />
</div>
<div>
field16:<input type="text" name="field16" required="true" min="5"/>
<!--如果属性比较少可以直接写在html标签里面 -->
</div>
<div>
<input type="submit" name="submit" value="submit"/>
</div>
</form>
</body>
</html>
jquery插件-表单验证插件的更多相关文章
- jQuery formValidator表单验证插件
什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...
- 【锋利的jQuery】表单验证插件踩坑
和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- jQuery Validate 表单验证插件----自定义一个验证方法
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- jQuery Validate 表单验证插件----自定义校验结果样式
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- jQuery Validate 表单验证插件----通过name属性来关联字段来验证，改变默认的提示信息，将校验规则写到 js 代码中
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...
- jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...
- jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验
一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...
- jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...
随机推荐
- 在Mac mini上安装 ESXi 5.5
Mac mini 是 mid 2011 版本的, 安装原版ESXi 5.5 update 1 非常顺利, 没遇到任何问题. 提示: 1. 安装会初始化整个硬盘, 有数据要先备份 2. ESXi只使用有 ...
- delphi附带通用控件安装方法：
附带通用控件安装方法:----------基本安装1.对于单个控件,Componet-->install component..-->PAS或DCU文件-->install;2.对于 ...
- 史上最全的CSS hack方式一览
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- CastleActiveRecord在多线程 事务提交时数据库资源竞争导致更新失败的测试结果记录
CastleActiveRecord 经过测试,隔离级别: // 摘要: , , , , , , , ...
- listview+seekbar问题的解决
最近做了个项目,其中有录音播放功能.每次录音结束都会在listView中显示,在listView中能播放每次的录音,也可以每条录音之间的切换播放.随之就引发了许多的问题,比如当我播放第一条录音的时所有 ...
- Java调用C/C++编写的第三方dll动态链接库（zz）
这里主要用的方法是JNI.在网上查资料时看到很多人说用JNI非常的复杂,不仅要看很多的文档,而且要非常熟悉C/C++编程.恐怕有很多人在看到诸如此类的评论时已经决定绕道用其他方法了.本文将做详细的介绍 ...
- 解决 未能从程序集“System.ServiceModel, Version=3.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089”中加载
先安装了 IIS ,再安装了 .net framework4.0 ,这样一来就要在cmd下注册.net framework4.0 步骤 第一步:修改配置文件 %windir%/system32/ine ...
- 用canvas画简单的“我的世界”人物头像
前言:花了4天半终于看完了<Head First HTML5>,这本书的学习给我最大的感受就是,自己知识的浅薄,还有非常多非常棒的技术在等着我呢.[熊本表情]扶朕起来,朕还能学! H5新增 ...
- SDRAM读写一字（下）
SDRAM读写一字 SDRAM控制模块 上电后进行初始化状态,初始化完成后进入空闲状态,在此进行判断如下判断: 如果自刷新时间到,则进行自刷新操作,操作完成后重新进入空闲状态: 如果读使能有效则进行读 ...
- JAVA多线程（二）
Synchronized的使用: (一)synchronized: Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 当某个方法或者代 ...