这篇文章给大家分享的是有关javascript表单是否为空的验证方法有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
拿到表单内容进行非空验证（单独函数封装，方便后面调用）
为空则向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表单是否为空的验证方法有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
