jQuery源码分析-学习 - jQuery作业练习 - 《网易微专业学习笔记》

问题1：
web开发中表单无处不在，从邮件订阅、登陆注册到多页填写信息提交，每次都需要花费大量时间和精力处理。
为了让客户端表单验证变得更简单，请基于jQuery 开发一个微量级验证插件（validate），为表单提供验证功能，并提交你的代码。
要求：
（1）可以让用户去配置选项，拥有定制validate插件的能力，如：

$(“form”). validate({
defaultEvent: “change”， //自定义校验触发事件
})

（2）至少包含四种表单验证方式（身份证号码验证、手机电话号码、电子邮箱验证、必填字段验证、最大值/最小值验证）。

<!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>jQuery 作业</title>
    <script src="jquery-2.0.3.js"></script>
    <script src="jquery.validate.js"></script>
    <style>
        .context{
            width: 500px;
            padding: 30px;
            margin:50px auto;
            border-radius:5px;
            box-shadow: 3px 3px 10px #888888;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
</head>
<body>
    <div class="context">
        <form>
            <div class="form-group">
                <label>邮箱</label>
                <input type="text" class="form-control" placeholder="请输入邮箱"
                  data-dv-email = true
                  data-dv-email-error = '请输入正确的邮箱'
                >
            </div>
            <div class="form-group">
                <label>手机</label>
                <input type="text" class="form-control" placeholder="请输入手机"
                  data-dv-mobile = true
                  data-dv-mobile-error = '请输入正确的手机'
                >
            </div>
            <div class="form-group">
                <label>座机</label>
                <input type="text" class="form-control" placeholder="请输入座机"
                  data-dv-landline = true
                  data-dv-landline-error = '请输入正确的座机'
                >
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="password" class="form-control" placeholder="请输入密码"
                  data-dv-password = true
                >
            </div>
            <button type="text" class="btn btn-success">提交</button>
        </form>
    </div>
    <script>
       $('form').validate({
           initEvent: 'blur'
       });
       //扩展功能
       $('form').validate.expand({
           landline: function() {
               return /^\d{3,4}-\d{7,8}$/.test(this.val());
           }
       });
    </script>
</body>
</html>

正则复习：
*：匹配前面的子表达式零次或多次。例如，zo 能匹配 “z” 以及 “zoo”。等价于{0,}。
+：匹配前面的子表达式一次或多次。例如，’zo+’ 能匹配 “zo” 以及 “zoo”，但不能匹配 “z”。+ 等价于 {1,}。
?：匹配前面的子表达式零次或一次。例如，”do(es)?” 可以匹配 “do” 或 “does” 中的”do” 。? 等价于 {0,1}。
{n}：n 是一个非负整数。匹配确定的 n 次。例如，’o{2}’ 不能匹配 “Bob” 中的 ‘o’，但是能匹配 “food” 中的两个 o。
{n,}：n 是一个非负整数。至少匹配n 次。例如，’o{2,}’ 不能匹配 “Bob” 中的 ‘o’，但能匹配 “foooood” 中的所有 o。’o{1,}’ 等价于 ‘o+’。’o{0,}’ 则等价于 ‘o‘。
{n,m}：m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，”o{1,3}” 将匹配 “fooooood” 中的前三个 o。’o{0,1}’ 等价于 ‘o?’。请注意在逗号和两个数之间不能有空格。
*\w：匹配包括下划线的任何单词字符。等价于’[A-Za-z0-9_]’。


(function(root, plug) {
   var RULES = {
       email: function() {
          // \w：匹配包括下划线的任何单词字符, 等价于'[A-Za-z0-9_]'
          return /^\w+@\w+\.\w+$/.test(this.val());
       },
       mobile: function() {
           // 匹配一个数字字符, 等价于 [0-9]
          return /^1\d{10}$/.test(this.val());
       },
       password: function() {
          // 匹配字符，6-12位，注意6,和12之间不能有空格
          return /^\w{6,12}$/.test(this.val());
       }
   };
   $.fn[plug] = function(options) {
      // 判断this是否为form元素
      if (!this.is('form')) {
         return this;
      }
      // 以默认配置为优先，用户配置为覆盖的原则
      var __def__ = {
          initEvent: 'input',
          sign: 'dv',
          error: '输入不合法，请检查您的输入'
      };
      //合并用户配置和默认配置，注意顺序
      var ret = $.extend({}, __def__, options);
      // 获取所有的input控件
      var keyNot = this.find('input');
      keyNot.on(ret.initEvent, function() {
          var error;
          // 因为event事件是在这个DOM上出发的，所以这里的this指向DOM元素
          // 要把这里的this包装成jQuery对象
          var _this = $(this);
          //如果已经有错误信息，则移除
          _this.next('span').remove();
          $.each(RULES, function(key, func){
             var attrValue = _this.data(ret.sign + '-' + key);
             if (attrValue) {
                var result = func.call(_this);
                if (!result) {
                    error = _this.data(ret.sign + '-' + key + '-error') || __def__.error;
                    if (error) {
                       _this.after('<span style="color: red">'+ error +'</span>');
                    }
                }
             }
          });
      });
   };
   // 扩展功能
   $.fn[plug]['expand'] = function(options) {
      $.extend(RULES, options);
   };
})(this, 'validate');

问题2：
图片懒加载（LazyLoad）一直是前端的优化方案之一。
其核心思想是：先将img标签中的src链接设为同一张图片，真正的图片地址存储在img标签的自定义属性中。当js监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。
请基于jQuery开发一个懒加载插件。

基础知识拓展：
http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html
动画展示效果：网页开发时，常常需要了解某个元素是否进入了”视口”（viewport），即用户能不能看到它。
jQuery作业练习 - 图1
目前有一个新的 IntersectionObserver API，可以自动”观察”元素是否可见，Chrome 51+ 已经支持。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做”交叉观察器”。