jQuery.validate.js表单验证插件的使用代码详解


Posted in jQuery onOctober 22, 2018

Validate

Validate是基于jQuery的一款轻量级验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML、CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证。

效果:

jQuery.validate.js表单验证插件的使用代码详解

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>表单验证插件Validate</title>
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/jquery.validate.min.js"></script>
  <style>
    body {
      background-color: #000;
    }
    form {
      width: 361px;
      margin: 80px auto;
      padding: 50px;
      border: 2px solid #666;
      box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
      background-color: #999;
      border-radius: 10px;
      box-sizing: border-box;
    }
    form>div {
      margin-bottom: 20px;
      color: #fff;
    }
    form>div>label {
      display: inline-block;
      width: 80px;
      text-align: center;
    }
    label.error {
      display: block;
      width: 100%;
      color: rgb(189, 42, 42);
      font-size: 12px;
      text-align: right;
      margin-top: 5px;
    }
    input {
      width: 170px;
      height: 20px;
      outline: none;
      background-color: #ddd;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    .submit {
      width: 170px;
      margin: 30px auto 0;
    }
    .submit input {
      background-color: #0099aa;
      color: #fff;
      border: 0;
      padding: 5px;
      height: 30px;
    }
  </style>
</head>
<body>
  <form id="signupForm" action="" method="post">
    <div>
      <label for="name">姓名:</label>
      <input type="text" id="name" name="name">
    </div>
    <div>
      <label for="email">邮箱:</label>
      <input type="email" id="email" name="email">
    </div>
    <div>
      <label for="password">密码:</label>
      <input type="password" id="password" name="password">
    </div>
    <div>
      <label for="confirm_password">确认密码:</label>
      <input type="password" id="confirm_password" name="confirm_password">
    </div>
    <div class="submit">
      <input type="submit" value="提交">
    </div>
  </form>
</body>
<script>
  $(function() {
    $("#signupForm").validate({
      rules: {
        name: "required",
        email: {
          required: true,
          email: true
        },
        password: {
          required: true,
          minlength: 5
        },
        confirm_password: {
          required: true,
          minlength: 5,
          equalTo: "#password"
        }
      },
      messages: {
        name: "请输入姓名",
        email: {
          required: "请输入Email地址",
          email: "请输入正确的Email地址"
        },
        password: {
          required: "请输入密码",
          minlength: "密码不能小于5个字符"
        },
        confirm_password: {
          required: "请输入确认密码",
          minlength: "确认密码不能小于5个字符",
          equalTo: "两次输入的密码不一致"
        }
      }
    });
  })
</script>
</html>

总结

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

jQuery 相关文章推荐
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
jQuery轻量级表单模型验证插件
Oct 15 #jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 #jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 #jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 #jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 #jQuery
学习jQuery中的noConflict()用法
Sep 28 #jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 #jQuery
You might like
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
用Python实现一个简单的线程池
2015/04/07 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
python如何实现内容写在图片上
2018/03/23 Python
python之文件读取一行一行的方法
2018/07/12 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
内部类的定义、种类以及优点
2013/10/16 面试题
教师三严三实对照检查材料
2014/09/25 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL