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插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery实现查看图片功能
Dec 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
PHP的FTP学习(四)
2006/10/09 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
python学习教程之使用py2exe打包
2017/09/24 Python
Python合并多个Excel数据的方法
2018/07/16 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
python基于win32api实现键盘输入
2020/12/09 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
Java面试题汇总
2015/12/06 面试题
模具数控专业自荐信
2014/01/27 职场文书
会计的岗位职责
2014/03/15 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python