javascript表單是否為空的驗證方法有哪些

發(fā)布時間：2022-03-28 09:46:18 來源：億速云閱讀：343 作者：小新欄目：開發(fā)技術(shù)

這篇文章給大家分享的是有關(guān)javascript表單是否為空的驗證方法有哪些的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

表單驗證

拿到表單內(nèi)容進行非空驗證（單獨函數(shù)封裝，方便后面調(diào)用）
為空則向P里面加內(nèi)容
要阻斷表單提交，不然直接跳走了e.preventDefault()
提交時要判定是否為空
鍵值提交也要判定是否為空

 <!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>
div {
    width: 600px;
    height: 600px;
    margin: 50px auto;
    background-color: skyblue;
    padding: 20px;
}

div input {
    width: 520px;
    height: 50px;
    margin-top: 50px;

}
    </style>
</head>

<body>
<div>
<form action="">
    <input type="text" name="name" placeholder="輸入用戶名"><br>
    <p class="nameTip"></p>
    <input type="password" name="password" placeholder="輸入密碼"><br>
    <p class="passwordTip"></p>
    <input type="submit" name="submit" value="按鈕">
</form>
</div>
    <script>
var formEle = document.querySelector('form')
var nameinput = document.querySelector('input[name="name"]')
var passwordinput = document.querySelector('input[name="password"]')
var pnameTip = document.querySelector('.nameTip')
var ppasswordTip = document.querySelector('.passwordTip')
//是否為空判定
function checkUserNameNull(){
    if(nameinput.value==''){
            pnameTip.innerHTML='輸入名字'
            return false
        }else{
            pnameTip.innerHTML=''
            return true
        }
}
//失去焦點進行用戶名是否為空驗證
    nameinput.οnblur=function (){
        checkUserNameNull()
    }
//是否為空判定
function checkPasswordNull(){
    if(passwordinput.value==''){
            ppasswordTip.innerHTML='輸入名字'
            return false
        }else{
            ppasswordTip.innerHTML=''
            return true
        }
}
//失去焦點進行密碼框是否為空驗證
    passwordinput.οnblur=function (){
        checkPasswordNull()
    }

//提交時驗證
formEle.onsubmit = function (e) {
    e.preventDefault()
    //阻止表單默認(rèn)提交
    var nameisok=checkUserNameNull()
    var passwordisok= checkPasswordNull()
//都滿足不為空提交 
    if(nameisok && passwordisok){
        location.href = 'https://www.baidu.com/'
    }
}
//鍵值提交
document.οnkeyup=function (e){
    var keyCode=e.keyCode|| e.which
    if(keyCode==13&&e.shiftKey){
        var nameisok=checkUserNameNull()
        var passwordisok= checkPasswordNull()
        if(nameisok && passwordisok){
        location.href = 'https://www.baidu.com/'
    }
    }
}
    </script>
</body>

</html>

感謝各位的閱讀！關(guān)于“javascript表單是否為空的驗證方法有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

javascript表單是否為空的驗證方法有哪些

表單驗證

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽