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 相关文章推荐
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
VUE中使用MUI方法
Feb 12 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 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多个字符串替换成同一个的解决方法
2013/06/18 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
javascript 有用的脚本函数
2009/05/07 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
Django的信号机制详解
2017/05/05 Python
Python函数式编程
2017/07/20 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
python ansible服务及剧本编写
2017/12/29 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
医学生自荐信
2013/12/03 职场文书
大学生个人自荐信
2014/02/24 职场文书
机关办公室岗位职责
2014/04/16 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
房贷工资证明范本
2015/06/12 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs
源码安装apache脚本部署过程详解
2022/09/23 Servers