失去焦点验证

最新推荐文章于 2024-05-24 16:31:36 发布

黄酱！

最新推荐文章于 2024-05-24 16:31:36 发布

阅读量259

点赞数

分类专栏： JS 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/tianranran/article/details/121800446

版权

JS 专栏收录该内容

91 篇文章 2 订阅

订阅专栏

<!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>表单事件</title>
    <style>
        .form1 {
            width: 300px;
            margin: 100px auto;
            background-color: cadetblue;
            padding: 50px;
        }

        .item {
            margin-bottom: 20px;
        }

        p {
            color: #3520aa;
            font-size: 14px;
        }
    </style>
    <!-- 
        表单提交时，默认执行表单提交事件，再跳转到action动作指定的url页面
           如: https://www.baidu.com/?username=admin&password=123

        表单提交事件
            submit
            事件源是 form表单
        表单提交事件作用：
           => 表单验证
                1. 非空验证
                2. 密码强度验证
                3. 邮箱验证
                ....
            => 阻止表单默认action动作
                e.preventDefault()



        
         

     -->
</head>

<body>
    <form class="form1" action="http://www.baidu.com">
        <div class="item">
            <label for="">用户名:</label>
            <input type="text" name="username">
            <p class="user"></p>
        </div>
        <div class="item">
            <label for="">密&nbsp;&nbsp;&nbsp;码:</label>
            <input type="text" name="password">
            <p class="psw"></p>
        </div>
        <div>
            <input type="submit" value="提交">
        </div>
    </form>

    <script>
        var formEle = document.querySelector('.form1')
        var userNameInput = document.querySelector('input[name="username"]')
        var passwordInput = document.querySelector('input[name="password"]')
        //提示信息节点
        var pEle = document.querySelector('.user')
        var pswEle = document.querySelector('.psw')

        //给表单form绑定表单提交事件
        formEle.onsubmit = function (e) {
            e = e || window.event //事件对象
            e.preventDefault()  //阻止表单默认action动作

            var username = userNameInput.value
            var password = passwordInput.value

            var isUserName = true
            var isPassword = true
            //提交事件非空验证
            if (username == '') {
                pEle.innerHTML = '用户名不能为空!'
                isUserName = false
            }

            if (password == '') {
                pswEle.innerHTML = '密码不能为空!'
                isPassword = false
            }

            if(isUserName && isPassword){
                //跳转提交页面
                location.href = `https://www.baidu.com/?username=${username}&password=${password}`
            }


        }

        userNameInput.onblur = function () {
            var username = userNameInput.value // 获取用户名
            //非空验证
            if (username == '') {
                pEle.innerHTML = '用户名不能为空!'
            } else {
                pEle.innerHTML = ''
            }
        }

        passwordInput.onblur = function () {
            var password = passwordInput.value //密码
            if (password == '') {
                pswEle.innerHTML = '密码不能为空!'
            } else {
                pswEle.innerHTML = ''
            }
        }


    </script>
</body>

</html>

改进版

<!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>表单事件</title>
    <style>
        .form1 {
            width: 300px;
            margin: 100px auto;
            background-color: cadetblue;
            padding: 50px;
        }

        .item {
            margin-bottom: 20px;
        }

        p {
            color: #3520aa;
            font-size: 14px;
        }
    </style>
    <!-- 
        表单提交时，默认执行表单提交事件，再跳转到action动作指定的url页面
           如: https://www.baidu.com/?username=admin&password=123

        表单提交事件
            submit
            事件源是 form表单
        表单提交事件作用：
           => 表单验证
                1. 非空验证
                2. 密码强度验证
                3. 邮箱验证
                ....
            => 阻止表单默认action动作
                e.preventDefault()
     -->
</head>

<body>
    <form class="form1" action="http://www.baidu.com">
        <div class="item">
            <label for="">用户名:</label>
            <input type="text" name="username">
            <p class="user"></p>
        </div>
        <div class="item">
            <label for="">密&nbsp;&nbsp;&nbsp;码:</label>
            <input type="text" name="password">
            <p class="psw"></p>
        </div>
        <div>
            <input type="submit" value="提交">
        </div>
    </form>

    <script>
        var formEle = document.querySelector('.form1')
        var userNameInput = document.querySelector('input[name="username"]')
        var passwordInput = document.querySelector('input[name="password"]')
        //提示信息节点
        var pEle = document.querySelector('.user')
        var pswEle = document.querySelector('.psw')

        //给表单form绑定表单提交事件
        formEle.onsubmit = function (e) {
            e = e || window.event //事件对象
            e.preventDefault()  //阻止表单默认action动作

            //非空验证
            var isUserName = checkUsernameNull()
            var isPassword = checkPasswordNull()

            console.log('isUserName :', isUserName, ' isPassword :', isPassword);
            if (isUserName && isPassword) {

                if (userNameInput.value == 'admin' && passwordInput.value == '123') {
                    //跳转提交页面
                    location.href = `https://www.baidu.com/?username=${userNameInput.value}&password=${passwordInput.value}`
                }else{
                    alert('用户名密码出错')
                }

            }

        }

        userNameInput.onblur = function () {
            checkUsernameNull()
        }

        passwordInput.onblur = function () {
            checkPasswordNull()
        }

        /*
        * 检查用户名是否为空
        *  true 验证通过
        *  false 验证未通过
        */
        function checkUsernameNull() {
            var username = userNameInput.value // 获取用户名
            //非空验证
            if (username == '') {
                pEle.innerHTML = '用户名不能为空!'
                return false
            } else {
                pEle.innerHTML = ''
                return true
            }
        }

        /*
        *  密码非空验证
        *  true 验证通过
        *  false 验证未通过
        */
        function checkPasswordNull() {
            var password = passwordInput.value //密码
            if (password == '') {
                pswEle.innerHTML = '密码不能为空!'
                return false
            } else {
                pswEle.innerHTML = ''
                return true
            }
        }


    </script>
</body>

</html>

黄酱！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
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>表单
复制链接

扫一扫