用js實現一個簡易的表單驗證
效果：
代碼:
<html>
<head>
<title>js校驗form表單</title>
<meta charset="UTF-8" />
<!--聲明css代碼域-->
<style type="text/css"> /*設置背景圖片*/ body { background-image: url(img/1.jpg); background-size: cover; } /*設置tr樣式*/ tr { height: 40px; } /*設置div樣式*/ #showdiv { border: solid 1px #FF0000; border-radius: 10px; width: 500px; margin: auto; margin-top: 40px; } /*設置table*/ table { margin: auto; color: white; } span { font-size: 13px; } #codeSpan { font-size: 20px; } </style>
<!--聲明js代碼域-->
<script type="text/javascript"> //常見驗證碼 function createCode() { //創建隨機四位數字 var code = Math.floor(Math.random() * 9000 + 1000); //獲取元素對象 var span = document.getElementById("codeSpan"); //將數字存放到span中 span.innerHTML = code; } //驗證用戶名 function checkUname() { //獲取用戶的用戶名信息 var uname = document.getElementById("uname").value; //創建校驗規則 var reg = /^[\u4e00-\u9fa5]{2,4}$/ //獲取span對象 var span = document.getElementById("unameSpan"); //開始校驗 if (uname == "" || uname == null) { //輸出校驗結果 span.innerHTML = "用戶名不能為空"; span.style.color = "red"; return false; } else if (reg.test(uname)) { //輸出校驗結果 span.innerHTML = "用戶名ok"; span.style.color = "green"; return true; } else { //輸出校驗結果 span.innerHTML = "用戶名不符合規則"; span.style.color = "red"; return false; } } //驗證密碼 function checkPwd() { //獲取用戶的密碼信息 var pwd = document.getElementById("pwd").value; //創建校驗規則 var reg = /^[a-z]\w{5,7}$/; //獲取span對象 var span = document.getElementById("pwdSpan"); //開始校驗 if (pwd == "" || pwd == null) { //輸出校驗結果 span.innerHTML = "*密碼不能為空"; span.style.color = "red"; return false; } else if (reg.test(pwd)) { //輸出校驗結果 span.innerHTML = "*密碼ok"; span.style.color = "green"; return true; } else { //輸出校驗結果 span.innerHTML = "*密碼格式不正確"; span.style.color = "red"; return false; } checkPwd2(); } //校驗確認密碼 function checkPwd2() { //獲取第一次密碼 var pwd = document.getElementById("pwd").value; //獲取確認密碼 var pwd2 = document.getElementById("pwd2").value; //獲取span對象 var span = document.getElementById("pwd2Span"); //比較兩次密碼是否相同 if (pwd2 == "" || pwd2 == null) { span.innerHTML = "確認密碼不能為空"; span.style.color = "red"; return false; } else if (pwd == pwd2) { span.innerHTML = "確認密碼ok"; span.style.color = "green"; return true; } else { span.innerHTML = "兩次密碼不一致"; span.style.color = "red"; return false; } } //校驗手機號 function checkPhone() { return checkField("phone", /^1[3,4,5,7,8]\d{9}$/); } //校驗郵箱 function checkMail() { return checkField("mail", /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/) } //校驗籍貫 function checkAddress() { //獲取用戶選擇的數據 var sel = document.getElementById("address").value; //獲取span var span = document.getElementById("addressSpan"); //校驗 if (sel != 0) { span.innerHTML = "籍貫選擇成功"; span.style.color = "green"; return true; } else { span.innerHTML = "籍貫不能為請選擇"; span.style.color = "red"; return false; } } //校驗技能 function checkFav() { //獲取所有的技能 var favs = document.getElementsByName("fav"); //獲取span var span = document.getElementById("favSpan"); //遍歷 for (var i = 0; i < favs.length; i++) { if (favs[i].checked) { span.innerHTML = "技能選擇成功"; span.style.color = "green"; return true; } } span.innerHTML = "技能至少選則一項"; span.style.color = "red"; return false; } //校驗驗證碼 function checkCode() { //獲取提示語的span var span = document.getElementById("checkCodeSpan"); //獲取已經生成的驗證碼的span var span2 = document.getElementById("codeSpan"); var code = span2.innerHTML; //獲取輸入值 var inp = document.getElementById("code").value; //開始校驗 if (code == inp) { //輸出校驗結果 span.innerHTML = "*驗證碼正確"; span.style.color = "green"; return true; } else { //輸出校驗結果 span.innerHTML = "*驗證碼不正確"; span.style.color = "red"; return false; } } //校驗是否同意公司協議 function checkAgree() { document.getElementById("sub").disabled = !document.getElementById("agree").checked; } //提交判斷 function checkSub() { checkUname(); checkPwd(); checkPwd2(); checkPhone(); checkMail(); checkAddress(); checkFav(); checkCode(); return checkUname() && checkPwd() && checkPwd2() && checkPhone() && checkMail(