当前位置：网站首页>表单是否为空验证

表单是否为空验证

2022-04-22 12:23:00 【鹏程933】

表单验证

请添加图片描述

  1. 拿到表单内容进行非空验证（单独函数封装，方便后面调用）
  2. 为空则向P里面加内容
  3. 表单内容验证
  4. 要阻断表单提交，不然直接跳走了e.preventDefault()
  5. 提交时要判定是否为空
  6. 键值提交也要判定是否为空
<!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{
    
            return checkUSer()
        }
}
//同户名验证：首字母大写，其余为数字和字母组合 function checkUSer(){
    
    let reg=/^[A-Z][0-9a-zA-Z]*/ let str=nameinput.value if(reg.test(str)){
    
        pnameTip.innerHTML=''
        return true
    }else{
    
        pnameTip.innerHTML='不符合首字母大写'
        return false
    }
   
}
//失去焦点进行用户名是否为空验证 nameinput.οnblur=function (){
    
        checkUserNameNull()
    }
//是否为空判定 function checkPasswordNull(){
    
    if(passwordinput.value==''){
    
            ppasswordTip.innerHTML='输入名字'
            return false
        }else{
    
            
            return checkPassword()
        }
}
//密码验证：数字和字母组合，最少8位 function checkPassword(){
    
    let reg=/[0-9a-zA-Z]{
    8,}/ let str=passwordinput.value if(reg.test(str)){
    
        ppasswordTip.innerHTML=''
        return true
    }else{
    
        ppasswordTip.innerHTML='不符合数字和字母组合，最少8位'
        return false
    }
   
}
//失去焦点进行密码框是否为空验证 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>

版权声明
本文为[鹏程933]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_64925940/article/details/123692337

边栏推荐

猜你喜欢

随机推荐