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 png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
axios+Vue实现上传文件显示进度功能
Apr 14 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
在JavaScript中如何使用宏详解
May 06 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设计模式 php实现原型模式(prototype)
2015/12/07 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
代码生成器 document.write()
2007/04/15 Javascript
javascript replace方法与正则表达式
2008/02/19 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
python实现雨滴下落到地面效果
2018/06/21 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
python浪漫表白源码
2019/04/05 Python
python3中property使用方法详解
2019/04/23 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
详解python中*号的用法
2019/10/21 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
python一些性能分析的技巧
2020/08/30 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
运动会邀请函范文
2014/02/06 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
无房证明样本
2015/06/17 职场文书
化验室安全管理制度
2015/08/06 职场文书
公司年会主持词范文!
2019/05/07 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
Vue.Draggable实现交换位置
2022/04/07 Vue.js