JavaScript 表單驗證程式碼例項
本文分享一段通過JavaScript實現的簡單表單驗證程式碼例項。
不使用任何HTML5新增的表單驗證特性。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> function checkForm(form) { let reg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; if(form.username.value == "") { alert("使用者名稱不能為空!"); form.username.focus(); return false; } if(form.password.value == "") { alert("密碼不能為空!"); form.password.focus(); return false; } if(form.email.value==""){ alert("郵箱不能為空!"); form.email.focus(); return false; }else if(!reg.test(form.email.value)){ alert("郵箱格式不正確!"); form.email.focus(); return false; } return true; } window.onload = function () { var myform = document.forms[0]; myform.onsubmit = function () { return checkForm(this); } } </script> </head> <body> <form action="#" method="post"> 姓名:<input type="text" name="username"/><br/> 密碼:<input type="password" name="password" /><br/> 郵箱:<input type="text" name="email" /><br/> <input type="submit" value="提交表單"/> </form> </body> </html>
上面是一段簡單的表單驗證效果,它實現如下功能:
(1).姓名、密碼和郵箱是否為空驗證。
(2).郵箱格式正確性驗證效果。
相關文章
- javascript表單驗證JavaScript
- JavaScript 表單驗證JavaScript
- JavaScript in運算子程式碼例項JavaScript
- JavaScript表單不為空驗證JavaScript
- 直播平臺原始碼,JavaScript表單驗證密碼強度原始碼JavaScript密碼
- JavaScript運動框架程式碼例項JavaScript框架
- JavaScript取餘數程式碼例項JavaScript
- JavaScript 阻止事件冒泡程式碼例項JavaScript事件
- JavaScript陣列合並程式碼例項JavaScript陣列
- JavaScript倒數計時程式碼例項JavaScript
- JavaScript 點選回車驗證提交表單JavaScript
- 5種PHP生成圖片驗證碼例項PHP
- 【例項】使用GD庫生成圖片驗證碼
- JavaWeb——驗證碼功能解決表單重複提交問題(使用谷歌驗證碼jar包為例)JavaWeb谷歌JAR
- 純原生javascript下拉框表單美化例項教程JavaScript
- JavaScript刪除元素節點程式碼例項JavaScript
- JavaScript中常用的事件程式碼及例項JavaScript事件
- table表頭分組程式碼例項
- PHP 完整表單例項PHP單例
- 前端學習程式碼例項-JavaScript阻止事件冒泡前端JavaScript事件
- JavaScript驗證碼生成和驗證效果JavaScript
- Laravel 表單驗證Laravel
- bootstrap表單驗證boot
- bootstrapValidator 表單驗證boot
- antd 表單驗證
- HTML 使用表單標籤實現註冊頁面的例項程式碼HTML
- 淡入淡出效果簡單程式碼例項
- javascript表單賬戶密碼校驗提交JavaScript密碼
- JavaScript隨滑鼠晃動的div塊程式碼例項JavaScript
- JavaScript讀取文字檔案內容程式碼例項JavaScript
- 前端學習程式碼例項-JavaScript 生成隨機數前端JavaScript隨機
- 表單required 必需驗證UI
- HTML 表單驗證概述HTML
- 表單資料驗證
- 表單驗證 regex:pattern
- 輸入表單驗證
- 路由表單驗證路由
- JavaScript 點選複製選中文字程式碼例項JavaScript