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选择器_动力节点Java学院整理
Jul 05 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
基于jquery实现五星好评
Nov 18 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
jQuery实现穿梭框效果
Jan 19 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路径的用法总结
2014/07/09 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
python 多线程应用介绍
2012/12/19 Python
SVM基本概念及Python实现代码
2017/12/27 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
美国存储和组织商店:The Container Store
2017/08/16 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
策划主管的工作职责
2013/11/24 职场文书
毕业设计计划书
2014/01/09 职场文书
五四青年节的活动方案
2014/08/20 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
依法行政工作汇报
2014/10/28 职场文书
导游欢送词
2015/01/31 职场文书
超市店长竞聘书
2015/09/15 职场文书
配置nginx 重定向到系统维护页面
2021/06/08 Servers
Python序列化与反序列化相关知识总结
2021/06/08 Python
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle