點選提交按鈕實現彈出警告框表單驗證效果
本章節介紹一下如何實現基本的表單驗證功能。
最為常見的一種方式就是當點選提交按鈕的時候,如果有表單的內容填寫不符合規範那麼就會彈出警告框。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> function $(id){ return document.getElementById(id); } function check(){ var email = $("email").value; var password = $("password").value; var repassword = $("repassword").value; var name = $("name").value; if(email == "") { alert("Email值不能為空"); $("email").focus(); return false; } if(email.indexOf("@") == -1 || email.indexOf(".") == -1){ alert("郵箱格式不正確,必須包含@和."); $("email").focus(); return false; } if(password == ""){ alert("密碼不能為空"); $("password").focus(); return false; } if(password.length < 6) { alert("密碼長度必須大於或者等於6"); $("password").focus(); return false; } if(repassword != password) { alert("兩次輸入的密碼不一致"); $("repassword").focus(); return false; } if(name == "") { alert("姓名不能為空"); $("name").focus(); return false; } for(var i = 0; i < name.length; i++) { var j = name.subString(i , i+1); if(isNaN(j) == false) { alert('姓名中不能包含數字'); $("name").focus(); return false; } } } window.onload=function(){ var obt=document.getElementById("bt"); obt.onclick=function(){return check()} } </script> </head> <body> <form name="login_form" method="post"> <div>Email:<input type="text" name="email" id="email"/></div> <div>密碼:<input type="password" name="password" id="password"/></div> <div>重輸密碼:<input type="password" name="repassword" id="repassword"/></div> <div>姓名:<input type="text" name="name" id="name"/></div> <div><input id="bt" type="submit" value="註冊"/></div> </form> </body> </html>
上面的程式碼實現了我們的要求,如果表單元素值不滿足要求,則會彈出提示框,下面簡單介紹一下需要注意的一些問題。
if語句中都有一個return false,這是為了跳出函式的執行,並且能夠阻止按鈕的預設動作,否則的話依然會提交表單。
focus()方法則是為了使不符合要求的當前表單元素獲取焦點。
相關閱讀:
1.focus()方法可以參閱javascript password.focus()一章節。
2.return false可以參閱javascript return false的作用是什麼一章節。
3.indexOf()方法可以參閱javascript String indexOf()一章節。
4.isNaN()方法可以參閱javascript isNaN()一章節。
相關文章
- JavaScript點選按鈕彈出層效果JavaScript
- 點選enter和ctrl實現表單提交效果
- js表單提交後提交按鈕不可點選程式碼例項JS
- 點選刪除按鈕彈出是否刪除提示框
- javascript實現點選彈出確認刪除警告框程式碼JavaScript
- 點選按鈕實現數字增加效果
- 防止表單提交按鈕重複點選現象程式碼例項
- JavaScript 點選回車驗證提交表單JavaScript
- Path實現常見toolbar點選彈出選單效果
- javascript實現的點選不同提交按鈕實現提交到不同頁面JavaScript
- 點選按鈕實現狀態切換效果
- 點選按鈕實現圖片切換效果
- 點選按鈕彈出一個居中div
- 點選回車實現表單提交效果程式碼例項
- jquery 實現 點選按鈕後倒數計時效果,多用於實現傳送手機驗證碼、郵箱驗證碼jQuery
- Layui Confirm彈出框連續點選按鈕會觸發多次事件UI事件
- 語音交友app開發,點選按鈕出現彈窗的實現方式APP
- 窗體(文字框,按鈕,單選按鈕,標籤)
- Java選擇框和單選按鈕Java
- 點選回車實現按鈕點選功能
- 點選按鈕實現切換頁面背景顏色效果
- Android實現人人網點選“+”彈出效果Android
- 單選按鈕美化效果程式碼
- css3實現的美觀的提交按鈕效果CSSS3
- 去掉超連結或按鈕點選時出現的虛線邊框
- radio單選按鈕美化效果
- CSS3提交按鈕等待打點迴圈效果CSSS3
- 點選文字框實現文字框內容選中效果
- 點選瀏覽器後退按鈕時彈出提示資訊瀏覽器
- vue 表單驗證按鈕事件交由父元件觸發Vue事件元件
- uniapp點選按鈕提交textarea值為undifineAPP
- 如何點選一個按鈕實現列印
- jQuery實現的點選彈出登陸視窗效果jQuery
- JavaScript點選按鈕數字加1效果JavaScript
- Flutter | 超實用簡單選單彈出框 PopupMenuButtonFlutter
- 表單提交後設定提交按鈕不可用狀態
- jQuery點選按鈕實現div的隱藏和顯示切換效果jQuery
- 通過xml檔案實現自定義圓角按鈕,以及點選效果XML