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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery treeview树形结构应用
Mar 24 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缓存集成库phpFastCache用法
2014/12/15 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
简单实现php上传文件功能
2017/09/21 PHP
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
详解python eval函数的妙用
2017/11/16 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
PyQt5实现画布小程序
2020/05/30 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
台湾家适得:Homeget
2019/02/11 全球购物
什么是网络协议
2016/04/07 面试题
什么是Remote Module
2016/06/10 面试题
生产现场工艺工程师岗位职责
2013/11/28 职场文书
应届毕业生通用的自荐书范文
2014/02/07 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
护理专科学生自荐书
2014/07/05 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript