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 相关文章推荐
jQuery对象[0]是什么含义?
Jul 31 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 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中\r \r\n \t的区别示例介绍
2014/02/08 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
JavaScript 常用函数
2009/12/30 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
Python调用服务接口的实例
2019/01/03 Python
python多进程读图提取特征存npy
2019/05/21 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
解除劳动合同协议书
2014/04/14 职场文书
销售目标责任书
2014/07/23 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
七年级数学教学反思
2016/02/17 职场文书
高中英语教学反思范文
2016/03/02 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
Python中文纠错的简单实现
2021/07/07 Python