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设置图片等比例缩小的方法
Apr 29 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 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
几个php应用技巧
2008/03/27 PHP
PHP 各种排序算法实现代码
2009/08/20 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
php微信开发之百度天气预报
2016/11/18 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
一套C#面试题
2013/10/09 面试题
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
《匆匆》教学反思
2014/02/22 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
初中差生评语
2014/12/29 职场文书
铁人观后感
2015/06/16 职场文书
PL350与SW11的比较
2021/04/22 无线电