jQuery插件Validation快速完成表单验证的方式


Posted in Javascript onJuly 28, 2016

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快速完成表单验证的方式

以上就是关于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>

不知道怎么回事,我这段代码没有显示中文提示,大家发现了错误在哪里了吗?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
vue观察模式浅析
Sep 25 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 #Javascript
AngularJS 模块详解及简单实例
Jul 28 #Javascript
jQuery制作网页版选项卡
Jul 28 #Javascript
AngularJS 中的事件详解
Jul 28 #Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 #Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 #Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 #Javascript
You might like
一个php作的文本留言本的例子(一)
2006/10/09 PHP
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
php如何获取文件的扩展名
2015/10/28 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
js prototype截取字符串函数
2010/04/01 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
Python中int()函数的用法浅析
2017/10/17 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
基于Python中的yield表达式介绍
2019/11/19 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
打架检讨书50字
2014/01/11 职场文书
后勤管理员岗位职责
2014/08/27 职场文书