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框架Ajax常用选项
Jul 08 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 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
PHP动态创建Web站点的方法
2011/08/14 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
php链式操作的实现方式分析
2019/08/12 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
javascript 得到变量类型的函数
2010/05/19 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
python脚本内运行linux命令的方法
2015/07/02 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
详解python深浅拷贝区别
2019/06/24 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
集体婚礼策划方案
2014/02/22 职场文书
详解Python描述符的工作原理
2021/06/11 Python
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
浅谈Redis缓冲区机制
2022/06/05 Redis