ASCII码 ASCII码

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

发布于：2022-01-26 17:55:57  栏目：技术文档

1. 用blur事件做表单验证

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>表单事件</title>
  8.   </head>
  9.   <body>
  10.     <style>
  11.       html {
  12.         font-size: 100px;
  13.       }
  14.       * {
  15.         padding: 0;
  16.         margin: 0;
  17.         border: none;
  18.         box-sizing: border-box;
  19.       }
  20.       body {
  21.         font-size: 16px;
  22.         background-color: rgb(51, 169, 204);
  23.       }
  24.       #login {
  25.         width: 3.5rem;
  26.         margin: 2rem auto;
  27.         padding: 0.15rem 0.25rem;
  28.         background-color: rgb(128, 206, 227);
  29.         display: grid;
  30.         grid-template-columns: 0.6rem 1fr;
  31.         gap: 0.15rem 0;
  32.       }
  33.       h3 {
  34.         margin-bottom: 0.2rem;
  35.         text-align: center;
  36.         grid-area: auto / span 2;
  37.       }
  38.       button {
  39.         padding: 0.05rem;
  40.         color: white;
  41.         background-color: rgb(62, 141, 186);
  42.         margin-bottom: 0.2rem;
  43.         grid-area: auto / 2 / auto;
  44.       }
  45.       button:hover {
  46.         cursor: pointer;
  47.         background-color: rgb(38, 105, 138);
  48.       }
  49.     </style>
  50.     <form id="login">
  51.       <h3>用户登录</h3>
  52.       <label for="email">邮箱：</label>
  53.       <input type="email" name="email" id="email" onblur="checkEmail(this)" />
  54.       <label for="pass">密码：</label>
  55.       <input type="password" name="pass" id="pass" onblur="checkPass()" />
  56.       <button onclick="login()">登录</button>
  57.     </form>
  58.     <script>
  59.       let checkEmailState = false;
  60.       let checkPassState = false;
  61.       //   邮箱输入框失去焦点时检查输入
  62.       function checkEmail(ev) {
  63.         // 阻止冒泡
  64.         event.stopPropagation();
  65.         let email = ev.form.email.value;
  66.         if (email.length === 0) {
  67.           alert("邮箱名不能为空！");
  68.           checkEmailState = false;
  69.         } else {
  70.           checkEmailState = true;
  71.         }
  72.       }
  73.       //   密码失去焦点时检查输入
  74.       function checkPass() {
  75.         event.stopPropagation();
  76.         let pass = event.target;
  77.         if (pass.value.length === 0) {
  78.           alert("密码不能为空！");
  79.           checkPassState = false;
  80.         } else {
  81.           checkPassState = true;
  82.         }
  83.       }
  84.       function login() {
  85.         if (checkEmailState && checkPassState) {
  86.           alert("验证通过！");
  87.         } else {
  88.           alert("验证错误，请重新输入！");
  89.         }
  90.       }
  91.     </script>
  92.   </body>
  93. </html>

2.常用字符串api

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>字符常用api</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       let msg = "php中文网：公益在线php培训，帮助PHP学习者快速成长！";
  13.       // 1. length：字符串长度
  14.       console.log(msg.length);
  16.       // 2. charAt：索引，第几个字符
  17.       console.log(msg.charAt(8));
  18.       //   字符串可当作数组
  19.       console.log(msg[8]);
  21.       //   3. indexOf:字符索引，返回是第几个字符
  22.       console.log(msg.indexOf("学"));
  24.       //   4. search：同上，支持正则表达
  25.       console.log(msg.search("学"));
  27.       //   5. replace：替换
  28.       console.log(msg.replace("中文网", ".cn中文网"));
  30.       //   6. slice：取子串，开始，结束
  31.       console.log(msg.slice(3, 6));
  33.       //   7. substr：取子串，开始，长度
  34.       console.log(msg.substr(3, 6));
  35.       //   负数为从倒数第几个开始
  36.       console.log(msg.substr(-6, 3));
  38.       //   8. split：转为数组，每个字符为一个值
  39.       let msgArr = msg.split("");
  40.       console.log(msgArr);
  41.       console.log(msgArr[3]);
  42.       //   指定转换数量，例：把6个字符转为数组
  43.       console.log(msg.split("", 6));
  45.       //   9. toLowerCase，toUpperCase：大小写转换
  46.       console.log(msg.toLowerCase());
  47.       console.log(msg.toUpperCase());
  49.       //   10. 与html相关
  50.       console.log(`<a href="https://php.cn">${msg}</a>`);
  51.       //   link实现上面连接
  52.       console.log(msg.link("https://php.cn"));
  54.       //   添加加粗元素
  55.       console.log(msg.bold());
  56.       //   创建锚点
  57.       console.log(msg.anchor("url"));
  58.     </script>
  59.   </body>
  60. </html>

3. 数组常用api

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>数组常用api</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       //   一、创建数组的方式
  12.       // 1. 用字面量，数组里支持任何类型数据
  13.       let arr = [
  14.         1,
  15.         3,
  16.         6,
  17.         "中文网",
  18.         true,
  19.         { i: 55, j: 88, aa() {} },
  20.         () => "这是函数。",
  21.       ];
  22.       console.log(arr);
  24.       //   2. 用...rest创建
  25.       let arrOne = [...arr];
  26.       console.log(arrOne);
  27.       //   扩展数组
  28.       let arrTwo = [56, 78, "ok", ...arrOne];
  29.       console.log(arrTwo);
  31.       //   3. Array.of创建
  32.       let arrThree = Array.of(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
  33.       console.log(arrThree);
  34.       arrThree = [1, 3, 5, 7, 9];
  35.       let arrFour = Array.of(...arrThree);
  36.       console.log(arrFour);
  38.       //   4. Array.from 创建类数组
  39.       // 定义类
  40.       const weather = {
  41.         0: "暴风雨",
  42.         1: "晴",
  43.         2: "小雨",
  44.         length: 3,
  45.       };
  46.       //   weather为类
  47.       console.log(weather);
  48.       //   转为数组
  49.       console.log(Array.from(weather));
  51.       //   二、数组增删
  52.       let arrEr = [5, 8, 10];
  53.       // 从尾部增加
  54.       arrEr.push(15);
  55.       arrEr.push(25, 28);
  56.       console.log(arrEr);
  57.       //   从尾部删除
  58.       arrEr.pop();
  59.       arrEr.pop();
  60.       arrEr.pop();
  61.       console.log(arrEr);
  62.       //   从头部增加
  63.       arrEr.unshift(4);
  64.       arrEr.unshift(1, 2);
  65.       console.log(arrEr);
  66.       //   从头删除
  67.       arrEr.shift();
  68.       arrEr.shift();
  69.       arrEr.shift();
  70.       console.log(arrEr);
  71.       // 按索引删除，只能删除值，长度不变
  72.       delete arrEr[1];
  73.       console.log(arrEr);
  74.       console.log(arrEr.length);
  75.       //   通过修改数组长度，增加空值
  76.       arrEr.length = 5;
  77.       console.log(arrEr);
  79.       //   三、迭代方法和遍历元素
  80.       //   1.forEach
  81.       let arrFor = [10, 20, 30, 40, 50, 60, 70, 80, 90];
  82.       //   forEach的参数是回调函数
  83.       //   回调函数的参数：
  84.       // 第一个：从数组中取的值
  85.       // 第二个：数组的索引
  86.       // 第三个：要遍历的数组
  87.       //   没有返回值，不能赋值给变量
  88.       arrFor.forEach(function (value, index, arrFor) {
  89.         console.log(value, index);
  90.         document.body.append(`数组值${value}--`);
  91.       });
  92.       // 2. map：参数功能与forEach一样，有返回值
  93.       let value = arrFor.map((value) => value);
  94.       console.log(value);
  95.       // 3. every，some：断言函数，返回true，false
  96.       // every：判断数组成员是否全部满足条件
  97.       console.log(value.every((i) => i > 55));
  98.       console.log(value.every((i) => i < 500));
  99.       // some：数组成员中只要有1个满足条件就为true
  100.       console.log(value.some((i) => i > 55));
  101.       console.log(value.some((i) => i < 80));
  102.       // 4. filter：返回数组中满足条件的值，组成新数组
  103.       let min = value.filter((i) => i < 80);
  104.       console.log(min);
  105.       // 5. reduce：归并，参数a为累加器，结果放到a，a可设初始值
  106.       value = arrFor.reduce(function (a, b, c, d) {
  107.         console.log(`${a}--${b}--${c}--${d}`);
  108.         return a + b;
  109.       }, 100);
  111.       // 四、
  112.       // 1. sort：排序，
  113.       arr = [5, 15, 35, 85];
  114.       // 默认按字母表顺序
  115.       console.log(arr.sort());
  116.       // 按大到小排，要用参数
  117.       console.log(arr.sort((a, b) => a - b));
  118.       // 从小到大排;
  119.       console.log(arr.sort((a, b) => b - a));
  121.       // 2. join：连接数组
  122.       arr = ["大号", "中号", "小号"];
  123.       console.log(arr.join());
  124.       console.log(arr.join("--"));
  126.       // 3. slice：取子元素
  127.       arr = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19];
  128.       // 第2个到第5个
  129.       console.log(arr.slice(2, 5));
  130.       // 第2个开始到最后
  131.       console.log(arr.slice(2));
  132.       // 倒数第6个到倒数第2个
  133.       console.log(arr.slice(-6, -2));
  135.       // 4. splice：删除、新增、替换
  136.       // 从索引1开始删除3个元素
  137.       console.log(arr.splice(1, 3));
  138.       console.log(arr);
  139.       // 替换：从索引1开始替换3个元素
  140.       console.log(arr.splice(1, 3, "a", "b", "c"));
  141.       console.log(arr);
  142.       // 插入：从索引1开始插入3个元素
  143.       console.log(arr.splice(1, 0, "红", "黄", "蓝"));
  144.       console.log(arr);
  145.       let data = ["太阳", "月亮"];
  146.       console.log(arr.splice(5, 0, ...data));
  147.       console.log(arr);
  148.     </script>
  149.   </body>
  150. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行