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 相关文章推荐
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 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
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
js 提交和设置表单的值
2008/12/19 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
javascript常用对话框小集
2013/09/13 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
javascript中闭包closure的深入讲解
2021/03/03 Javascript
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python采集腾讯新闻实例
2014/07/10 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
Python 元组操作总结
2019/09/18 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
儿科护理实习自我鉴定
2013/09/19 职场文书
优秀毕业生推荐信
2013/11/02 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
函授教育个人学习的自我评价
2013/12/31 职场文书
员工工作表扬信范文
2014/01/13 职场文书
便利店投资创业计划书
2014/02/08 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
电力工程合作意向书
2015/05/11 职场文书