javascript表单是否为空验证方法

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

表单验证

请添加图片描述

拿到表单内容进行非空验证（单独函数封装，方便后面调用）
为空则向P里面加内容
要阻断表单提交，不然直接跳走了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()
    //阻止表单默认提交
    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>

到此这篇关于javascript表单是否为空验证方法的文章就介绍到这了,更多相关javascript表单为空内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉