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 相关文章推荐
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
JQuery中$之选择器用法介绍
Apr 05 Javascript
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 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数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
php组合排序简单实现方法
2016/10/15 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
Python素数检测的方法
2015/05/11 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
python中time库的实例使用方法
2019/10/31 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
python dict乱码如何解决
2020/06/07 Python
Python 多进程、多线程效率对比
2020/11/19 Python
python绘制汉诺塔
2021/03/01 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
九一八事变演讲稿范文
2014/09/14 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers