Js表单事件与数组常用 API -

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

博主信息

博文 14

粉丝 0

访问量 12193

专题推荐

更多>

1. 表单事件案例,

使用blur失去焦点进行非空验证

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <style>
        body {
            background-color: mediumturquoise;
            color: #444;
            font-weight: lighter;
        }
        #login {
            width: 20em;
            border-radius: 0.3em;
            box-shadow: 0 0 1em #888;
            box-sizing: border-box;
            padding: 1em 2em 1em;
            margin: 5em auto;
            background-color: paleturquoise;
            display: grid;
            grid-template-columns: 3em 1fr;
            gap: 1em 0;
        }
        #login .title {
            grid-area: auto / span 2;
            place-self: center;
        }
        #login input {
            border-radius: 0.3em;
            border: none;
            padding-left: 0.3em;
        }
        #login input:focus {
            outline: none;
            box-shadow: 0 0 5px seagreen;
            background-color: hsl(283, 100%, 95%);
            border-radius: 0.2em;
            transition: 0.5s;
        }
        #login button {
            grid-area: auto / 2 / auto;
            outline: none;
            background-color: lightseagreen;
            border: none;
            height: 2em;
            color: #fff;
        }
        #login button:hover {
            cursor: pointer;
            background-color: seagreen;
            transition: 0.5s;
        }
    </style>
</head>
<body>
    <form action="" method="post" id="login">
        <label class="title">用户登录</label>
        <label for="email">邮箱:</label>
        <input type="email" onblur="check(this)" id="email" name="email" value="" autofocus placeholder="请输入邮箱" />
        <label for="password">密码:</label>
        <input type="password" onblur="check(this)" id="password" name="password" placeholder="请输入密码" />
        <button name="submit">登录</button>
    </form>
    <script>
        function check(ele) {
            // 1. 防止默认的提交行为, 用户自定义
            event.preventDefault();
            // 2. 防止冒泡
            event.stopPropagation();
            // 3. 非空验证
            // 每一个控件input,button 都有一个属性form ,和当前表单绑定
            let email = ele.form.email;
            let password = ele.form.password;
            if (email.value.length === 0) {
                alert("邮箱不能为空");
                email.focus();
                return false;
            } else if (password.value.length === 0) {
                alert("密码不能为空");
                password.focus();
                return false;
            } else {
                alert("验证通过");
            }
        }
    </script>
</body>
</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或文件,而这个原始数据就是数组

let a = [1, 2, 3, 4, 5, 6];
// 经过一些其它操作,例如过滤,再重新生成
arr = Array.of(...a);
console.log(arr);

arr = [1, 2, 3, 4, 5];
delete arr[1];
console.log(arr);//[1, , 3, 4, 5];
console.log(arr.length);//5
arr.length = 4;
console.log(arr);//[1, , 3, 4]

// 1. sort
let arr = [1, 10, 20, 6];
console.log(arr.sort());
// asc
console.log(arr.sort((a, b) => a - b));
// desc
console.log(arr.sort((a, b) => b - a));
// 2. join:  array -> string
arr = ["red", "green", "blue"];
console.log(arr.join());
console.log(arr.join("-"));
// 3. slice: 子元素
arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr.slice(2, 5));
console.log(arr.slice(2));
console.log(arr.slice(-6, -3));
// 4. splce: 删除, 新增, 替换
// delete
console.log(arr);
console.log(arr.splice(1, 2));
console.log(arr);
// update
console.log(arr.splice(1, 2, "a", "b"));
console.log(arr);
// insert
console.log(arr.splice(1, 0, "red", "green"));
console.log(arr);
let data = ["red", "green", "blue"];
console.log(arr.splice(1, 0, ...data));
console.log(arr);
// 数组反转, 数组拼装, 拉平与一维数组... mdn

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

Ement常用语法使用学习记录

2021-12-22 18:32:21