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,Angular实现登录界面验证码详解
Apr 27 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 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
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
Python读写配置文件的方法
2015/06/03 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
使用python存储网页上的图片实例
2018/05/22 Python
python语音识别实践之百度语音API
2018/08/30 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
django自定义模板标签过程解析
2019/12/14 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
波兰补充商店:Muscle Power
2018/10/29 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
介绍一下grep命令的使用
2015/06/12 面试题
国际贸易专业推荐信
2013/11/15 职场文书
测绘工程专业个人自我评价
2013/12/01 职场文书
公司出纳岗位职责
2013/12/07 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
毕业证代领委托书
2014/09/26 职场文书
北京故宫导游词
2015/01/31 职场文书
肖申克救赎观后感
2015/06/02 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android