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日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jquery实现提示语淡入效果
May 05 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
详解jquery和vue对比
Apr 16 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 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
桌面中心(一)创建数据库
2006/10/09 PHP
上传多个文件的PHP脚本
2006/11/26 PHP
PHP实现采集程序原理和简单示例代码
2007/03/18 PHP
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
Javascript的一种模块模式
2008/03/22 Javascript
javascript 精粹笔记
2010/05/09 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
详解vue 组件
2020/06/11 Javascript
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
Python import用法以及与from...import的区别
2015/05/28 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
Python实现的快速排序算法详解
2017/08/01 Python
python文本数据处理学习笔记详解
2019/06/17 Python
python切割图片的示例
2020/11/12 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
建筑施工员岗位职责
2013/11/26 职场文书
公司合作协议书范本
2014/04/18 职场文书
大学生新学期计划书
2014/04/28 职场文书
师德师风事迹材料
2014/12/20 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
报名委托书
2015/01/29 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫