js--用blur事件做表单验证，常用字符串、数组api小结

程序员文章站 2022-03-03 21:19:55

...

1. 用blur事件做表单验证


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单事件</title>
  </head>
  <body>
    <style>
      html {
        font-size: 100px;
      }
      * {
        padding: 0;
        margin: 0;
        border: none;
        box-sizing: border-box;
      }
      body {
        font-size: 16px;
        background-color: rgb(51, 169, 204);
      }
      #login {
        width: 3.5rem;
        margin: 2rem auto;
        padding: 0.15rem 0.25rem;
        background-color: rgb(128, 206, 227);
        display: grid;
        grid-template-columns: 0.6rem 1fr;
        gap: 0.15rem 0;
      }
      h3 {
        margin-bottom: 0.2rem;
        text-align: center;
        grid-area: auto / span 2;
      }
      button {
        padding: 0.05rem;
        color: white;
        background-color: rgb(62, 141, 186);
        margin-bottom: 0.2rem;
        grid-area: auto / 2 / auto;
      }
      button:hover {
        cursor: pointer;
        background-color: rgb(38, 105, 138);
      }
    </style>
    <form id="login">
      <h3>用户登录</h3>
      <label for="email">邮箱：</label>
      <input type="email" name="email" id="email" onblur="checkEmail(this)" />
      <label for="pass">密码：</label>
      <input type="password" name="pass" id="pass" onblur="checkPass()" />
      <button onclick="login()">登录</button>
    </form>
    <script>
      let checkEmailState = false;
      let checkPassState = false;
      //   邮箱输入框失去焦点时检查输入
      function checkEmail(ev) {
        // 阻止冒泡
        event.stopPropagation();
        let email = ev.form.email.value;
        if (email.length === 0) {
          alert("邮箱名不能为空！");
          checkEmailState = false;
        } else {
          checkEmailState = true;
        }
      }
      //   密码失去焦点时检查输入
      function checkPass() {
        event.stopPropagation();
        let pass = event.target;
        if (pass.value.length === 0) {
          alert("密码不能为空！");
          checkPassState = false;
        } else {
          checkPassState = true;
        }
      }
      function login() {
        if (checkEmailState && checkPassState) {
          alert("验证通过！");
        } else {
          alert("验证错误，请重新输入！");
        }
      }
    </script>
  </body>
</html>

2.常用字符串api


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>字符常用api</title>
  </head>
  <body>
    <script>
      let msg = "：公益在线php培训，帮助PHP学习者快速成长！";

      // 1. length：字符串长度
      console.log(msg.length);

      // 2. charAt：索引，第几个字符
      console.log(msg.charAt(8));
      //   字符串可当作数组
      console.log(msg[8]);

      //   3. indexOf:字符索引，返回是第几个字符
      console.log(msg.indexOf("学"));

      //   4. search：同上，支持正则表达
      console.log(msg.search("学"));

      //   5. replace：替换
      console.log(msg.replace("中文网", ".cn中文网"));

      //   6. slice：取子串，开始，结束
      console.log(msg.slice(3, 6));

      //   7. substr：取子串，开始，长度
      console.log(msg.substr(3, 6));
      //   负数为从倒数第几个开始
      console.log(msg.substr(-6, 3));

      //   8. split：转为数组，每个字符为一个值
      let msgArr = msg.split("");
      console.log(msgArr);
      console.log(msgArr[3]);
      //   指定转换数量，例：把6个字符转为数组
      console.log(msg.split("", 6));

      //   9. toLowerCase，toUpperCase：大小写转换
      console.log(msg.toLowerCase());
      console.log(msg.toUpperCase());

      //   10. 与html相关
      console.log(`<a href="https://php.cn">${msg}</a>`);
      //   link实现上面连接
      console.log(msg.link("https://php.cn"));

      //   添加加粗元素
      console.log(msg.bold());
      //   创建锚点
      console.log(msg.anchor("url"));
    </script>
  </body>
</html>

3. 数组常用api


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数组常用api</title>
  </head>
  <body>
    <script>
      //   一、创建数组的方式
      // 1. 用字面量，数组里支持任何类型数据
      let arr = [
        1,
        3,
        6,
        "中文网",
        true,
        { i: 55, j: 88, aa() {} },
        () => "这是函数。",
      ];
      console.log(arr);

      //   2. 用...rest创建
      let arrOne = [...arr];
      console.log(arrOne);
      //   扩展数组
      let arrTwo = [56, 78, "ok", ...arrOne];
      console.log(arrTwo);

      //   3. Array.of创建
      let arrThree = Array.of(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
      console.log(arrThree);
      arrThree = [1, 3, 5, 7, 9];
      let arrFour = Array.of(...arrThree);
      console.log(arrFour);

      //   4. Array.from 创建类数组
      // 定义类
      const weather = {
        0: "暴风雨",
        1: "晴",
        2: "小雨",
        length: 3,
      };
      //   weather为类
      console.log(weather);
      //   转为数组
      console.log(Array.from(weather));

      //   二、数组增删
      let arrEr = [5, 8, 10];
      // 从尾部增加
      arrEr.push(15);
      arrEr.push(25, 28);
      console.log(arrEr);
      //   从尾部删除
      arrEr.pop();
      arrEr.pop();
      arrEr.pop();
      console.log(arrEr);
      //   从头部增加
      arrEr.unshift(4);
      arrEr.unshift(1, 2);
      console.log(arrEr);
      //   从头删除
      arrEr.shift();
      arrEr.shift();
      arrEr.shift();
      console.log(arrEr);
      // 按索引删除，只能删除值，长度不变
      delete arrEr[1];
      console.log(arrEr);
      console.log(arrEr.length);
      //   通过修改数组长度，增加空值
      arrEr.length = 5;
      console.log(arrEr);

      //   三、迭代方法和遍历元素
      //   1.forEach
      let arrFor = [10, 20, 30, 40, 50, 60, 70, 80, 90];
      //   forEach的参数是回调函数
      //   回调函数的参数：
      // 第一个：从数组中取的值
      // 第二个：数组的索引
      // 第三个：要遍历的数组
      //   没有返回值，不能赋值给变量
      arrFor.forEach(function (value, index, arrFor) {
        console.log(value, index);
        document.body.append(`数组值${value}--`);
      });
      // 2. map：参数功能与forEach一样，有返回值
      let value = arrFor.map((value) => value);
      console.log(value);
      // 3. every，some：断言函数，返回true，false
      // every：判断数组成员是否全部满足条件
      console.log(value.every((i) => i > 55));
      console.log(value.every((i) => i < 500));
      // some：数组成员中只要有1个满足条件就为true
      console.log(value.some((i) => i > 55));
      console.log(value.some((i) => i < 80));
      // 4. filter：返回数组中满足条件的值，组成新数组
      let min = value.filter((i) => i < 80);
      console.log(min);
      // 5. reduce：归并，参数a为累加器，结果放到a，a可设初始值
      value = arrFor.reduce(function (a, b, c, d) {
        console.log(`${a}--${b}--${c}--${d}`);
        return a + b;
      }, 100);

      // 四、
      // 1. sort：排序，
      arr = [5, 15, 35, 85];
      // 默认按字母表顺序
      console.log(arr.sort());
      // 按大到小排，要用参数
      console.log(arr.sort((a, b) => a - b));
      // 从小到大排;
      console.log(arr.sort((a, b) => b - a));

      // 2. join：连接数组
      arr = ["大号", "中号", "小号"];
      console.log(arr.join());
      console.log(arr.join("--"));

      // 3. slice：取子元素
      arr = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19];
      // 第2个到第5个
      console.log(arr.slice(2, 5));
      // 第2个开始到最后
      console.log(arr.slice(2));
      // 倒数第6个到倒数第2个
      console.log(arr.slice(-6, -2));

      // 4. splice：删除、新增、替换
      // 从索引1开始删除3个元素
      console.log(arr.splice(1, 3));
      console.log(arr);
      // 替换：从索引1开始替换3个元素
      console.log(arr.splice(1, 3, "a", "b", "c"));
      console.log(arr);
      // 插入：从索引1开始插入3个元素
      console.log(arr.splice(1, 0, "红", "黄", "蓝"));
      console.log(arr);
      let data = ["太阳", "月亮"];
      console.log(arr.splice(5, 0, ...data));
      console.log(arr);
    </script>
  </body>
</html>

上一篇：通过滤镜实现图片背景变化_html/css_WEB-ITnose

下一篇： ITX可以扔了！全球首款mini-STX机箱诞生