Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Js表单事件与数组常用 API
Blogger Information
Blog 14
fans 0
comment 0
visits 8282
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表单事件与数组常用 API
#三生
Original
451 people have browsed it

1. 表单事件案例,

使用blur失去焦点进行非空验证
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>表单事件</title>
  9.     <style>
  10.         body {
  11.             background-color: mediumturquoise;
  12.             color: #444;
  13.             font-weight: lighter;
  14.         }
  16.         #login {
  17.             width: 20em;
  18.             border-radius: 0.3em;
  19.             box-shadow: 0 0 1em #888;
  20.             box-sizing: border-box;
  21.             padding: 1em 2em 1em;
  22.             margin: 5em auto;
  23.             background-color: paleturquoise;
  24.             display: grid;
  25.             grid-template-columns: 3em 1fr;
  26.             gap: 1em 0;
  27.         }
  29.         #login .title {
  30.             grid-area: auto / span 2;
  31.             place-self: center;
  32.         }
  34.         #login input {
  35.             border-radius: 0.3em;
  36.             border: none;
  37.             padding-left: 0.3em;
  38.         }
  40.         #login input:focus {
  41.             outline: none;
  42.             box-shadow: 0 0 5px seagreen;
  43.             background-color: hsl(283, 100%, 95%);
  44.             border-radius: 0.2em;
  45.             transition: 0.5s;
  46.         }
  48.         #login button {
  49.             grid-area: auto / 2 / auto;
  50.             outline: none;
  51.             background-color: lightseagreen;
  52.             border: none;
  53.             height: 2em;
  54.             color: #fff;
  55.         }
  57.         #login button:hover {
  58.             cursor: pointer;
  59.             background-color: seagreen;
  60.             transition: 0.5s;
  61.         }
  62.     </style>
  63. </head>
  65. <body>
  66.     <form action="" method="post" id="login">
  67.         <label class="title">用户登录</label>
  68.         <label for="email">邮箱:</label>
  69.         <input type="email" onblur="check(this)" id="email" name="email" value="" autofocus placeholder="请输入邮箱" />
  70.         <label for="password">密码:</label>
  71.         <input type="password" onblur="check(this)" id="password" name="password" placeholder="请输入密码" />
  72.         <button name="submit">登录</button>
  73.     </form>
  75.     <script>
  76.         function check(ele) {
  77.             // 1. 防止默认的提交行为, 用户自定义
  78.             event.preventDefault();
  79.             // 2. 防止冒泡
  80.             event.stopPropagation();
  81.             // 3. 非空验证
  82.             // 每一个控件input,button 都有一个属性form ,和当前表单绑定
  83.             let email = ele.form.email;
  84.             let password = ele.form.password;
  85.             if (email.value.length === 0) {
  86.                 alert("邮箱不能为空");
  87.                 email.focus();
  88.                 return false;
  89.             } else if (password.value.length === 0) {
  90.                 alert("密码不能为空");
  91.                 password.focus();
  92.                 return false;
  93.             } else {
  94.                 alert("验证通过");
  95.             }
  96.         }
  97.     </script>
  98. </body>
  100. </html>

2. 字符串中常用的api

字符串 说明 let str = “php中文网”;
length 长度 str.length
charAt 索引->元素 str.charAt(3)
indexOf 字符->索引 str.indexOf(“中”)
search indexOf一样,但支持正则等 str.search(“文”)
concat 字符串拼装 str.concat(“(“, “php.cn”, “)”)
replace 替换 str.replace(“中文网”, “.cn”)
slice 子串, 忽略结束索引的值 str.slice(0, 3)
substr 子串, 只需要知道取多少个 str.substr(0, 3)
split 分割字符串 str.split(“”, 3)
toLowerCase 将字符串全部转成小写 str.toLowerCase()
toUpperCase 将字符串全部转成大写 str.toUpperCase()

3.数组常用api

  • 原始数据有可能来自一个外部请求api或文件,而这个原始数据就是数组
  1. let a = [1, 2, 3, 4, 5, 6];
  2. // 经过一些其它操作,例如过滤,再重新生成
  3. arr = Array.of(...a);
  4. console.log(arr);
  1. arr = [1, 2, 3, 4, 5];
  2. delete arr[1];
  3. console.log(arr);//[1, , 3, 4, 5];
  4. console.log(arr.length);//5
  5. arr.length = 4;
  6. console.log(arr);//[1, , 3, 4]
  1. // 1. sort
  2. let arr = [1, 10, 20, 6];
  3. console.log(arr.sort());
  4. // asc
  5. console.log(arr.sort((a, b) => a - b));
  6. // desc
  7. console.log(arr.sort((a, b) => b - a));
  9. // 2. join:  array -> string
  10. arr = ["red", "green", "blue"];
  11. console.log(arr.join());
  12. console.log(arr.join("-"));
  14. // 3. slice: 子元素
  15. arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  16. console.log(arr.slice(2, 5));
  17. console.log(arr.slice(2));
  18. console.log(arr.slice(-6, -3));
  20. // 4. splce: 删除, 新增, 替换
  21. // delete
  22. console.log(arr);
  23. console.log(arr.splice(1, 2));
  24. console.log(arr);
  26. // update
  27. console.log(arr.splice(1, 2, "a", "b"));
  28. console.log(arr);
  30. // insert
  31. console.log(arr.splice(1, 0, "red", "green"));
  32. console.log(arr);
  34. let data = ["red", "green", "blue"];
  35. console.log(arr.splice(1, 0, ...data));
  36. console.log(arr);
  38. // 数组反转, 数组拼装, 拉平与一维数组... mdn
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