Js表单事件与数组常用 API

程序员文章站 2022-05-16 21:27:28

...

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 = “”;
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

上一篇： mysql实现增量备份

下一篇： javascript中的闭包原理以及数组与对象的学习

Js表单事件与数组常用 API

1. 表单事件案例,

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

2. 字符串中常用的api

3.数组常用api

js数组与字符串常用方法总结

Vue.js事件处理器与表单控件绑定详解

闭包的原理与经典应用场景，访问器属性，类与对象的创建与成员引用，数组与对象的解构过程与经典案例，JS引入到浏览器中的的方法及获取DOM元素的两个API

js数组与字符串常用方法总结

优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发

表单事件、常用的字符串,数组api

闭包的原理与经典应用场景，访问器属性，类与对象的创建与成员引用，数组与对象的解构过程与经典案例，JS引入到浏览器中的的方法及获取DOM元素的两个API

Vue.js事件处理器与表单控件绑定详解

Js 运行机制与字符串，数组常用 API

Js表单事件与数组常用 API