javascript表單是否為空驗證方法
更新時間：2022年03月28日 09:04:40 作者：鵬程933
表單驗證在很多地方都可以用到，本文詳細的介紹了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.
}
}
//鍵值提交
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.
}
}
}
</script>
</body>
</html>
到此這篇關于javascript表單是否為空驗證方法的文章就介紹到這了,更多相關javascript表單為空內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
正如標題所言使用js實現按鈕控制文本框加1減1，此類主要應用于小時+分鐘，下面有個不錯的示例，喜歡的朋友可以參考下2013-12-12
Javascript開發(fā)包大全整理...2006-12-12
這篇文章主要給大家介紹了利用原生JS如何實現圖片高斯模糊切換效果的焦點圖，文中給出了完整的實例代碼，相信對大家的理解和學習具有一定的參考借鑒價值，下面來一起看看吧。2017-01-01
JS網絡游戲-(模擬城市webgame)提供的一些例子下載...2007-10-10
這篇文章主要介紹了微信小程序之側邊欄滑動實現過程解析（附完整源碼）,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了JavaScript實現函數返回多個值的方法,涉及javascript字典類型的使用技巧,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細介紹了layui實現下拉框三級聯(lián)動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
直接調用window.print()，但是打印出來后，字體總是縮小一號,后來直接target="_blank"，就可以正常打印了，下面是實現代碼2014-01-01
這篇文章主要介紹了使用javascript做的一個隨機點名程序，經測試，效果相當不錯,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了JS生成不重復隨機數組的函數代碼,需要的朋友可以參考下2014-06-06