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 相关文章推荐
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery实现雪花飘落效果
Aug 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
深入探讨PHP中的内存管理问题
2011/08/31 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
Python编程argparse入门浅析
2018/02/07 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
Django REST framework 视图和路由详解
2019/07/19 Python
python 字符串常用方法汇总详解
2019/09/16 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
家居设计专业个人自荐信范文
2013/11/26 职场文书
党支部书记先进事迹
2014/01/17 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang
MySql分区类型及创建分区的方法
2022/04/13 MySQL