jQuery Validate插件实现表单强大的验证功能
转自:http://www.jb51.net/article/76595.htm
jQuery Validate插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。
第一节:jQuery Validation让验证变得如此容易
一、官网下载jquery,和jquery validation plugin
二、引入文件
<script src=
"js/jquery-1.8.0.min.js"
type=
"text/javascript"
></script>
<script src=
"js/jquery.validate.js"
type=
"text/javascript"
></script>
<
form
action
=
""
id
=
"jvForm"
>
姓名:<
input
type
=
"text"
name
=
"username"
id
=
"username"
class
=
"required"
/></
br
>
密码:<
input
type
=
"password"
name
=
"password"
id
=
"password"
class
=
"required"
/></
br
>
<
input
type
=
"submit"
value
=
"提交"
/>
</
form
>
他的作用就是在这个inpute标签为空时会提示用户出错。
<script type=
"text/javascript"
>
$(
function
() {
$(
"#jvForm"
).validate();
})
</script>

第二节:jQuery Validation让验证变得如此容易
上一个例子我们是统一引用jquery.validate.js这样所有必填字段的提示信息都将是This field is required.
现在要改成动态提示,比如姓名如果为空则提示姓名不能为空,密码如果为空则提示密码不能为空。
这次我们将校验规则写在代码里
首先还是先引入文件
<script src=
"js/jquery-1.8.0.min.js"
type=
"text/javascript"
></script>
<script src=
"js/jquery.validate.js"
type=
"text/javascript"
></script>
<
form
action
=
""
id
=
"jvForm"
>
姓名:<
input
type
=
"text"
name
=
"username"
id
=
"username"
/></
br
>
密码:<
input
type
=
"password"
name
=
"password"
id
=
"password"
/></
br
>
<
input
type
=
"submit"
value
=
"提交"
/>
</
form
>
最后 校验规则如下:
$(
function
() {
$(
"#jvForm"
).validate({
rules: {
username: {
required:
true
},
password: {
required:
true
}
},
messages: {
username: {
required:
"姓名不能为空!"
},
password: {
required:
"密码不能为空!"
}
}
});
})

第三节:jQuery Validation让验证变得如此容易
以下代码进行对jQuery Validation的简单演示包括必填项、字符长度,格式验证
一、引入文件
<script src=
"js/jquery-1.8.0.min.js"
type=
"text/javascript"
></script>
<script src=
"js/jquery.validate.js"
type=
"text/javascript"
></script>
<
form
action
=
""
id
=
"jvForm"
>
用 户 名:<
input
type
=
"text"
name
=
"username"
/></
br
>
密 码:<
input
type
=
"password"
name
=
"password"
id
=
"password"
/></
br
>
确认密码:<
input
type
=
"password"
name
=
"confirm_password"
/></
br
>
出 生 地:<
select
name
=
"address"
><
option
value
=
""
>--</
option
><
option
value
=
"1"
>北京</
option
>
<
option
value
=
"1"
>上海</
option
><
option
value
=
"1"
>深圳</
option
></
select
></
br
>
手 机:<
input
type
=
"text"
name
=
"mobile"
/></
br
>
邮 箱:<
input
type
=
"text"
name
=
"email"
/></
br
>
<
input
type
=
"submit"
value
=
"提交"
/>
</
form
>
<style type=
"text/css"
>
label.error{
font-size
:
12px
;
font-weight
:
normal
;
color
:
#ff0511
;
margin-left
:
10px
;}
</style>
<script type =
"text/javascript"
>
$(
function
() {
$(
"#jvForm"
).validate({
rules: {
username: {
//用户名必填 至少3位
required:
true
,
minlength: 3
},
password: {
//密码必填 至少6位
required:
true
,
minlength: 6
},
confirm_password: {
//密码确认
required:
true
,
equalTo:
"#password"
},
address: {
//出生地必填
required:
true
},
mobile: {
//手机必填 验证格式
required:
true
,
mobile:
true
},
email: {
//email必填 验证格式
required:
true
,
email:
true
},
},
messages: {
username: {
required:
"用户名不能为空!"
,
minlength:
"用户名至少三位!"
},
password: {
required:
"密码不能为空!"
,
minlength:
"密码至少六位!"
},
confirm_password: {
required:
"密码确认不能为空!"
,
equalTo:
"两次输入密码不一致 !"
},
address: {
required:
"请选择出生地!"
,
},
mobile: {
required:
"手机不能为空!"
,
mobile:
"手机格式不正确"
,
},
email: {
required:
"邮箱不能为空!"
,
email:
"邮箱格式不正确"
,
},
}
});
})
</script>

jQuery Validate插件实现表单强大的验证功能的更多相关文章
- jQuery Validate 插件为表单提供了强大的验证功能
之前项目开发中,表单校验用的jQuery Validate 插件,这个插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的 ...
- validate插件实现表单效验(二)
一款优秀的表单验证插件——validation插件 特点: l 内置验证规则:拥有必填.数字.email.url和信用卡号码等19类内置验证规则 l 自定义验证规则:可以很方便的自定义验证规则 l ...
- jquery validate 一个注册表单的应用
先看页面 前端表单代码 register.html <form class="mui-input-group" id="regForm"> < ...
- 表单提交学习笔记(二)—使用jquery.validate.js进行表单验证
一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...
- jquery.validate.js自定义表单验证
$(document).ready(function() { //在下列位置输入页面加载的逻辑代码 $("#inputForm").validate({ rules: { seq: ...
- validate插件实现表单效验(一)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- [转]jQuery.validate插件在失去焦点时执行验证代码
转:http://my.oschina.net/enyo/blog/311566 关于 jquery.validate.js 表单验证插件如何在失去焦点时做验证.看手册后发现默认是在表单提交时执行验证 ...
- jQuery html5Validate基于HTML5表单 异步服务器端验证
1. HTML5 自带的Validate 很漂亮,很好用, 但是一定要在form里用submit按钮,才生效 <form id="frmInfo" action=" ...
- jquery.form插件 提交表单 type="hidden"取不到值的问题记录
1.外国文献:说可以改成其他的(非hidden),再加style="display:none"隐藏. <INPUT type="password" sty ...
随机推荐
- document.write() 和 document.writeln区别
document.write() 和 document.writeln 都是JavaScript向客户端写入的方法,writeln是以行方式输出的,但并不是指页面实际效果中的换行,两种方法在查看源代码 ...
- JAVA基础——链表结构之双端链表
双端链表:双端链表与传统链表非常相似.只是新增了一个属性-即对最后一个链结点的引用 如上图所示:由于有着对最后一个链结点的直接引用.所以双端链表比传统链表在某些方面要方便.比如在尾部插入一个链结点.双 ...
- 洛谷——P3946 ことりのおやつ(小鸟的点心)
P3946 ことりのおやつ(小鸟的点心) 题目太长,请去链接里看吧 注意细节:特判终点(即使困住又能怎样,到达就好了),特判高度 #include<bits/stdc++.h> #defi ...
- Cash Machine POJ - 1276
解法 多重背包板子题 多重背包板子 如果上限的体积大于了给定的体积那么套完全背包 否则二进制优化成01背包 代码 #include <iostream> #include <cstr ...
- Semi-colon expected (eclipse 引入 json文件报错)
最近做的项目用到的前端框架有一个json文件夹,里面全是json文件,所以导入Eclipse的时候会在整个项目上都是红叉,但是其实不影响项目运行的,之前忙着码代码也没时间管他,这个红叉存留了一个月!今 ...
- 53.doc value机制内核级原理深入探秘
主要知识点: doc value的原理 doc value性能优化 一.doc value原理 1. 生成时间:index-time生成 PUT/POST的时候,就会生成doc ...
- JavaSE 学习笔记之新特性之泛型(二十)
泛型:jdk1.5版本以后出现的一个安全机制.表现格式:< > 好处: 1:将运行时期的问题ClassCastException问题转换成了编译失败,体现在编译时期,程序员就可以解决问题. ...
- [luoguP2854] [USACO06DEC]牛的过山车Cow Roller Coaster(DP + sort)
传送门 先按照起点 sort 一遍. 这样每一个点的只由前面的点决定. f[i][j] 表示终点为 i,花费 j 的最优解 状态转移就是一个01背包. ——代码 #include <cstdio ...
- OSX: node中安装zeromq
1. brew install pkg-config2. brew install zmq3. export PKG_CONFIG_PATH="/usr/local/lib/pkgconfi ...
- jquery simple modal
窗体API定义丰富,而且使用也很容易上手.官方地址:http://www.ericmmartin.com/projects/simplemodal/从官方下载插件,在文件中引用<script t ...