search

博客列表 >Js表单事件与数组常用 API

Js表单事件与数组常用 API

#三生
#三生原创
2022年01月10日 15:39:21449浏览

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
上一条：js中的流程控制下一条：追格积分商城小程序（开源版）源码发布下载
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议