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中的deferred使用方法
Mar 27 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 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
下载文件的点击数回填
2006/10/09 PHP
在普通HTTP上安全地传输密码
2007/07/21 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
微信小程序时间选择插件使用详解
2018/12/28 Javascript
python抓取网页内容示例分享
2014/02/24 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
篝火晚会策划方案
2014/05/16 职场文书
就业协议书样本
2014/08/20 职场文书
企业贷款委托书格式
2014/09/12 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
2014年建筑工作总结
2014/11/26 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
工作服管理制度范本
2015/08/06 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python