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 Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jquery将json转为数据字典的实例代码
Oct 11 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
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
python 将字符串转换成字典dict
2013/03/24 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
pyqt5实现井字棋的示例代码
2020/12/07 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
卫校护理专业毕业生求职信
2013/11/26 职场文书
法人授权委托书格式
2014/04/08 职场文书
道德之星事迹材料
2014/05/03 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
银行竞聘报告范文
2014/11/06 职场文书
2014年计生工作总结
2014/11/21 职场文书
2015年维修工作总结
2015/04/25 职场文书
学习经验交流会总结
2015/11/02 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang