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 28 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 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 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
php实现插入排序
2015/03/29 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
JQuery 小练习(实例代码)
2009/08/07 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
python 生成器协程运算实例
2017/09/04 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
python 命名规范知识点汇总
2020/02/14 Python
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
物理学专业自荐信
2014/06/11 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
学生打架检讨书
2014/10/20 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
单位政审意见范文
2015/06/04 职场文书
Oracle表空间与权限的深入讲解
2021/11/17 Oracle
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis