js-表单验证

最新推荐文章于 2024-10-09 15:35:50 发布

YunDlm

最新推荐文章于 2024-10-09 15:35:50 发布

阅读量98

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/YunDlm/article/details/127930563

版权

图示:

html:

<body>
    <h1>登录</h1>
    账号:<input type="text" id="account_inp">
    <span id="span_account"></span>
    <br>
    <br>
    密码:<input type="text" id="password_inp">
    <span id="span_password"></span>
    <br>
    <button>提交</button>
</body>

js代码:

<script>
    /* 1. 获取元素 */
    // 账号框
    let account_inp = document.querySelector('#account_inp');
    // span
    let span_account = document.querySelector('#span_account');
    let span_password = document.querySelector('#span_password');
    // 密码框
    let password_inp = document.querySelector('#password_inp');
    // 提交按钮
    let but = document.querySelector('button');

    /* 2. 给元素添加事件 */
    // 2.1 给账号框添加失去焦点事件 并验证函数(正则表达式)
    account_inp.onblur = function () {
        account();
    };
    // 2.2 给密码框添加失去焦点事件 并验证函数(正则表达式)
    password_inp.onblur = function () {
        password();
    };
    // 2.3 给提交按钮添加点击事件 验证两个函数(账号密码)是否都符合
    but.onclick = function(){
        ver_btn();
    };


    /* 3. 验证封装函数(正则表达式) */
    // 3.1 账号验证
    function account() {
        // 6-12位 大小写字母、下划线、数字
        let patt = /^[\w\d]{6,12}$/;
        // 获取账号框的输入值
        let account_value = account_inp.value;
        // 正则表达式验证输入值 并赋值给变量  true false
        let result_account = patt.test(account_value);
        // 判断输入是否符合
        if (result_account) {
            span_account.innerHTML = '√';
            span_account.style.color = 'green';
        }
        else {
            span_account.innerHTML = '输入6-12位 大小写字母、下划线、数字';
            span_account.style.color = 'red';
        };
        return result_account;
    };
    // 3.2 密码验证
    function password() {
        let patt = /^[\w\d]{6,12}$/;
        let password_value = password_inp.value;
        let result_password = patt.test(password_value);
        if (result_password) {
            span_password.innerHTML = '√';
            span_password.style.color = 'green';
        }
        else {
            span_password.innerHTML = '输入6-12位 大小写字母、下划线、数字';
            span_password.style.color = 'red';
        };
        return result_password;
    };
    // 3.3 提交按钮验证两个函数(账号密码)是否都符合
    function ver_btn(){
        if(account() & password()){
            alert('通过');
        }
    };
</script>