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 replace方法去空格
May 08 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
使用jquery实现轮播图效果
Jan 02 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对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
总结Python编程中函数的使用要点
2016/03/20 Python
python连接mysql实例分享
2016/10/09 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
python dict 相同key 合并value的实例
2019/01/21 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
城建学院毕业生自荐信
2014/01/31 职场文书
创意广告词
2014/03/17 职场文书
节电标语大全
2014/06/23 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
幽灵公主观后感
2015/06/09 职场文书
辅导员学期工作总结
2015/08/14 职场文书
靠谱的活动总结
2019/04/16 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python