jQuery.Validate表单验证插件的使用示例详解


Posted in Javascript onJanuary 04, 2017

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。

请在这里查看示例 validate示例

示例包含

  • 验证错误时,显示红色错误提示
  • 自定义验证规则
  • 引入中文错误提示
  • 重置表单需要执行2句话

源码示例

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
 <title>demo</title> 
 <script src="../js/jquery-1.11.3.min.js"></script>
 <script src="js/jquery.validate.min.js"></script>
 <script src="js/messages_zh.min.js"></script>
 <style> 
  * { 
   margin: 0; 
   padding: 0; 
  } 
  body, html { 
   width: 100%; 
   height: 100%;
  } 
  .red {
   color: red;
  } 
  .green {
   color: green;
  }
 </style> 
</head> 
<body>
 <form id="form">
  <div>
   <input type="text" name="a" />
  </div>
  <div>
   <input type="submit" value="提交">
   <input class="reset" type="button" value="重置">
  </div>
 </form>
</body> 
<script> 
 $(function() {
  var validator = $('#form').validate({
   submitHandler:function(form){
    $('body').append('表单验证成功,发送了一个请求');
   },
   rules: {
    a: {
     required: true,
     isEven: true,// 使用自定义的验证规则
    },
   },
   messages: {
    a: {
     required: '<div><span class="red">*</span><span>此项必填</span></div>',
     isEven: '<div><span class="red">*</span><span>不是偶数</span></div>',
    },
   },
   // 验证成功后的回调
   success: function(label) {
    label.html('<div><span class="green">*</span><span>通过验证</span></div>');
   }
  });
  // 自定义验证
  jQuery.validator.addMethod('isEven', function(value, element) { 
   return this.optional(element) || !(value%2);
  }, '请输入一个偶数');
  // 重置表单
  $(".reset").click(function() {
   validator.resetForm();// 插件方法-删除错误提示
   $('#form')[0].reset();// 原生方法-清空输入内容
  });
 });
</script> 
</html>

相关阅读:

以上所述是小编给大家介绍的jQuery.Validate表单验证插件的使用示例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
快速处理vue渲染前的显示问题
Mar 05 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
javascript实现一个网页加载进度loading
Jan 04 #Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 #Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 #Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 #Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 #Javascript
手机端js和html5刮刮卡效果
Sep 29 #Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 #Javascript
You might like
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
php关联数组快速排序的方法
2015/04/17 PHP
写的htc的数据表格
2007/01/20 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
Python3中使用PyMongo的方法详解
2017/07/28 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
python多线程同步实例教程
2019/08/11 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
Python numpy数组转置与轴变换
2019/11/15 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
户外用品商店创业计划书
2014/01/29 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
同学会主持词
2014/03/18 职场文书
排查整治工作方案
2014/06/09 职场文书
车辆工程专业求职信
2014/06/14 职场文书
新手上路标语
2014/06/20 职场文书
班主任先进事迹材料
2014/12/17 职场文书
长城导游词300字
2015/01/30 职场文书
党支部工作总结2015
2015/04/01 职场文书
父亲去世追悼词
2015/06/23 职场文书
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫