JQuery插件使用之Validation 快速完成表单验证的几种方式
JQuery的Validation插件可以到http://plugins.jquery.com/上去下载。今天来分享一下，关于这个插件的使用。
简易使用
这第一种方式可谓是傻瓜式的使用，我们只需要按照validation定义好的规则就可以了。
- 首先引入JQuery库和Validation插件：
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>- 然后是打开验证开关：
$(function(){
$("#form_id").validate();
});
// 或者
$(document).ready(function(){
$("#form_id").validate();
});validation的
build_in验证规则有：class = “required”: 表明表单中该字段为必选的class = "required email"表明在表单中该字段为必须存在的，而且是符合email的规范格式class = "url"表明在表单中该字段需要满足url的匹配模式minlength = "6"表明在表单中该字段的长度最小为6位
案例展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Validation for form demo</title>
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<style>
em {
font-weight: bold;
vertical-align: top;
color: red;
float: right;
}
label {
width:10em;
padding: 7px;
}
.container {
width: 370px;
height: auto;
background-color: silver;
}
</style>
</head>
<body>
<div align="center" class="container">
<form id="vform" method="post" action="#">
<fieldset>
<legend>使用JQuery插件validation来实现表单验证</legend>
<p>
<label for="username">姓名：</label>
<input id="username" name="username" class="required" minlength="2"> <em>*</em>
</p>
<p>
<label for="email">邮件：</label>
<input id="email" name="email" class="required email" > <em>*</em>
</p>
<p>
<label for="url">网址：</label>
<input id="url" name="url" class="url" ></p>
<p>
<label for="comment">评论：</label>
<textarea id="comment" name="comment" class="required"></textarea>
<em>*</em>
</p>
<p><input type="submit" name="submit"></p>
</fieldset>
</form>
</div>
<script>
// $(function(){
// $("#vform").validation();
// });
$(document).ready(function(){
$("#vform").validate();
});
</script>
</body>
</html>验证规则全写到Class中
和简易使用不同的是，这种方式使用pure的class来进行控制。但是我们需要引入一个新的插件jquery.metadate.js。实现的功能就是帮助用户将所有的与验证数据相关的信息写到class属性中，方便管理。
我们可以通过以下几步来实现这一需求。
- 引入一个新的插件jquery.metadata.js
<script src="jquery.metadata.js"></script>- 改变调用验证表单的开关：
$(function(){
$("#form_id").validate();//去掉这行代码，修改成下面的
$("#form_id").validate({meta:"validate"});
});- 将验证信息写到class属性中。详见下面的代码。
<div align="center" class="container">
<form id="vform" method="post" action="#">
<fieldset>
<legend>使用JQuery插件validation来实现表单验证</legend>
<p>
<label for="username">姓名：</label>
<input id="username" name="username" class="{validate: { required : true, minlength : 2 }}" > <em>*</em>
</p>
<p>
<label for="email">邮件：</label>
<input id="email" name="email" class="{validate: { required :true,email :true}}" > <em>*</em>
</p>
<p>
<label for="url">网址：</label>
<input id="url" name="url" class="{validate: {url :true}}" ></p>
<p>
<label for="comment">评论：</label>
<textarea id="comment" name="comment" class="{validate: {required :true}}"></textarea>
<em>*</em>
</p>
<p><input type="submit" name="submit"></p>
</fieldset>
</form>
</div>注意： Validate写在class属性的时候，记得要将验证规则使用空格分隔开来。 否则代码不会正常的运行！
还有就是
$("#vform").validate({meta:"validate"});中validate这个单词不能随意的更改，否则也是不会生效的。
通过name属性构建验证规则
下面介绍一种与HTML元素的属性无直接关联，而是通过name属性来关联字段和验证规则的验证写法。
优点： 可以实现行为与结构的分离，便与调试和维护代码；
- 表单代码，去除所有的class验证。当然这并不是说我们不可以给字段添加样式咯。
<div align="center" class="container">
<form id="vform" method="post" action="#">
<fieldset>
<legend>使用JQuery插件validation来实现表单验证</legend>
<p>
<label for="username">姓名：</label>
<input id="username" name="username" > <em>*</em>
</p>
<p>
<label for="email">邮件：</label>
<input id="email" name="email" > <em>*</em>
</p>
<p>
<label for="url">网址：</label>
<input id="url" name="url" ></p>
<p>
<label for="comment">评论：</label>
<textarea id="comment" name="comment" ></textarea>
<em>*</em>
</p>
<p><input type="submit" name="submit"></p>
</fieldset>
</form>
</div>- JQuery代码如下：
<script>
// $(function(){
// $("#vform").validation();
// });
$(function(){
$("#vform").validate({
rules:{
username: {
required: true,
minlength: 6
},
email: {
required: true,
email: true
},
url: "url",
comment: "required"
}
});
});
</script>- 注意： 使用空格分隔验证字段
以上就是关于JQuery插件Validation的基础使用了。
国际化之中文化
- 首先引入一个中文的信息验证库，这个我们可以在下载好的validation的lib包下找到。
<script src="messages_zh.js"></script>- 第二步就是在验证规则处添加message字段，然后输入自定义的中文信息。如下：
<script>
// $(function(){
// $("#vform").validation();
// });
$(function(){
$("#vform").validate({
rules:{
username: {
required: true,
minlength: 6,
messages: {
required: '请输入姓名',
minlength: '请至少输入6个字符'
}
},
email: {
required: true,
email: true,
messages: {
required: '请输入邮箱',
email: '请检查您的邮箱格式！'
}
},
url: {
url: true,
messages: {
url: '请检查网址的格式！'
}
},
comment: {
required: true,
messages: {
required: '请输入评论！',
}
}
}
});
});
</script>不知道怎么回事，我这段代码没有显示中文提示，如果大家发现了错误在哪里，欢迎留下您的评论。
JQuery插件使用之Validation 快速完成表单验证的几种方式的更多相关文章
- asp.net 登陆验证 Form表单验证的3种方式 FormsAuthentication.SetAuthCookie；FormsAuthentication.RedirectFromLoginPage;FormsAuthenticationTicket
我们在登陆成功后,使用下面的3种方法,都是同一个目的:创建身份验证票并将其附加到 Cookie, 当我们用Forms认证方式的时候,可以使用HttpContext.Current.User.Ident ...
- 【jQuery】学习jQuery插件的使用与写法（表单验证插件-validation）
最新最全的插件可以从jQuery官方网站的插件板块下载,网站地址为:http://plugins.jquery.com/ Validation优点:内置验证规则:自定义验证规则:简单强大的验证信息提示 ...
- Form 表单提交的几种方式
简单的总结一下form表单提交的几种方式:1.最简单的方式 就用form的submit提交方式,这种提交方式是不需要回调函数的 这种方式最近到一个form提供action路径后台接受就可以< ...
- asp.net mvc表单提交的几种方式
asp.net MVC中form提交和控制器接受form提交过来的数据 MVC中form提交和在控制器中怎样接受 1.cshtml页面form提交2.控制器处理表单提交数据4种方式方法1:使用传统的R ...
- jQuery学习之路（8）- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- Jquery Validate结合QTip实现绚丽的表单验证
相信做过前端开发的童鞋,一定都涉及到表单验证的模块设计,也定都会对Alert的粗暴提示厌恶至极.当然,我也不例外.一直期待着,一种比较优雅提示效果. 看到这,大家可能觉得Jquery Validate ...
- [jQuery学习系列五 ]5-Jquery学习五-表单验证
前言最近总是有一个感觉,虽然这些东西都自己学习并一个案例一个案例的去验证过了.但是总觉得不写成博客记录下来这些都不是自己的东西(心理作用,哈哈).所以每当学习或者复习相关的知识我都喜欢记录下来,下面开 ...
- ace+validate表单验证（两种方法）
//修改密码(直接在validate中验证提交) $("#changePassword").on(ace.click_event, function() { var html = ...
- JS表单提交的几种方式
第一种方式 : 表单提交,在 form 标签中增加 onsubmit 事件来判断表单是否提交成功 <script type="text/javascript"> fun ...
随机推荐
- [Codeforces 946D]Timetable
Description 题库链接 给你一个 \(N\times M\) 的 \(01\) 矩阵,你可以从中将一些 \(1\) 变为 \(0\) ,最多 \(K\) 次.使操作之后使得每行最远的 \(1 ...
- BZOJ 3817 Sum
Description 给定正整数N,R.求 Input 第一行一个数 T,表示有 T 组测试数据. 接下来 T 行,每行两个正整数 n,r. Output 输出 T 行,每行一个整数表示答案. Sa ...
- ●BZOJ 2820 YY的GCD
题链: http://www.lydsy.com/JudgeOnline/problem.php?id=2820 题解: 莫比乌斯反演 先看看这个题:HDU 1695 GCD(本题简化版) HDU 1 ...
- ●BOZJ 4456 [Zjoi2016]旅行者
题链: http://www.lydsy.com/JudgeOnline/problem.php?id=4456 题解: 分治好题.大致做法如下:对于一开始的矩形区域,过较长边的中点把矩形区域分为两个 ...
- 51nod 1040 最大公约数之和（欧拉函数）
1040 最大公约数之和 题目来源: rihkddd 基准时间限制:1 秒 空间限制:131072 KB 分值: 80 难度:5级算法题 给出一个n,求1-n这n个数,同n的最大公约数的和.比如: ...
- [POJ]1279: Art Gallery
题目大意:有一个N边形展馆,问展馆内有多少地方可以看到所有墙壁.(N<=1500) 思路:模板题,半平面交求出多边形的核后计算核的面积. #include<cstdio> #incl ...
- python txt文件的写入和读取
1.文件的打开 使用open () 函数 打开文件.他有两个参数,文件路径或文件名和文件的打开方式. "r" 只读模式,不能编辑和删除文件内容. "w" 写入模 ...
- ⏰Day.js 2kB超轻量时间库 和Moment.js一样的API
Moment.js 是一个大而全的 JS 时间库,很大地方便了我们处理日期和时间.但是 Moment.js太重了(200k+ with locals),可能一般项目也只使用到了她几个常用的API.虽然 ...
- python3全栈开发-多进程的守护进程、进程同步、生产者消费者模式（重点）
一.守护进程 主进程创建守护进程 其一:守护进程会在主进程代码执行结束后就终止 其二:守护进程内无法再开启子进程,否则抛出异常:AssertionError: daemonic processes a ...
- Web网页树形列表中实现选中父节点则子节点全选和不选中父则子全不选
需要实现的功能:选中父节点对应子节点全选:不选中父节点,对应子节点也不选中 如下图所示,选中车队,对应车队中车辆也全部选中,以实现车队中所有车辆在地图上的显示. 选中cqupt ...