Community Learn Tools Library Leisure
search
English
Home > List of blog posts > js--用blur事件做表单验证，常用字符串、数组api小结
Blogger Information
Blog 29
fans 0
comment 0
visits 14891
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js--用blur事件做表单验证，常用字符串、数组api小结
cool442
Original
488 people have browsed it

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>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post