JS表单判断框内空的验证方法是什么
导读：关于“JS表单判断框内空的验证方法是什么”的知识点有一些人不是很理解，对此小编给大家总结了相关内容，文中的内容简单清晰，易于学习与理解，具有一定的参考学习价值，希望能对大家有所帮助，接下来就跟随小编一起学习一下“JS表单判断框内空的验证方法...
关于“JS表单判断框内空的验证方法是什么”的知识点有一些人不是很理解，对此小编给大家总结了相关内容，文中的内容简单清晰，易于学习与理解，具有一定的参考学习价值，希望能对大家有所帮助，接下来就跟随小编一起学习一下“JS表单判断框内空的验证方法是什么”吧。
表单验证
- 拿到表单内容进行非空验证（单独函数封装，方便后面调用）
- 为空则向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>
现在大家对于JS表单判断框内空的验证方法是什么的内容应该都清楚了吧，希望大家阅读完这篇文章能有所收获。最后，想要了解更多JS表单判断框内空的验证方法是什么的知识，欢迎关注网络，网络将为大家推送更多相关知识点的文章。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： JS表单判断框内空的验证方法是什么
本文地址： https://pptw.com/jishu/654352.html