表单输入字段pattern属性配合checkValidity方法实现表单验证

最新推荐文章于 2022-09-13 10:26:55 发布

似当日怎能够

最新推荐文章于 2022-09-13 10:26:55 发布

阅读量193

点赞数

分类专栏： JavaScript 文章标签： html css javascript html5

本文链接：https://blog.csdn.net/qq_53686582/article/details/118192594

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            box-sizing:border-box;
        }
        
        .green {
            color: green;
        }
        
        .red {
            color: red;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>用户名</th>
            <td><input type="text" pattern="^[a-zA-Z0-9_-]{4,16}$" data-name="用户名"></td>
            <td><span></span></td>
        </tr>
        <tr>
            <th>密码</th>
            <!-- pattern属性 为input设置正则表达式，配合checkValidity方法验证 -->
            <td><input type="password" pattern="^\w{6,13}$" data-name="密码"></td>
            <td><span></span></td>
        </tr>
    </table>
    <script>
        const ipts = document.querySelectorAll('input');
        const spans = document.querySelectorAll('span');
        let colorFlag = true; //判断颜色
        ipts.forEach((input, index) => {
            input.onblur = function() {
                let iptType = this.getAttribute('data-name');
                if (this.value) {
                    //checkValidity()是表单对象方法，用于验证输入是否合法
                    if (this.checkValidity()) {
                        spans[index].innerText = `${iptType}合法`;
                        colorFlag = true;
                    } else {
                        spans[index].innerText = `${iptType}不合法`;
                        colorFlag = false;
                    }
                } else {
                    spans[index].innerText = `请输入${iptType}`;
                    colorFlag = false;
                }
                spans[index].className = colorFlag ? 'green' : 'red';
            }
        })
    </script>
</body>

</html>

似当日怎能够

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表单输入字段pattern属性配合checkValidity方法实现表单验证

<!DOCTYPE html><html lang="en"><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>D.
复制链接

扫一扫