JavaScript實現表單驗證功能
本文實例為大家分享了JavaScript實現表單驗證功能的具體代碼，供大家參考，具體內容如下
以下是JavaScript的表單驗證功能，可根據JS代碼編寫出你想要的HTML和CSS的代碼。
關于正則表達式的使用，以及常用的正則表達式，筆者目前還在整理中，后期整理完成后，會將鏈接放在下面，供大家一起學習。
//1.聲明變量var emailObj;var usernameObj;var passwordObj;var confirmObj;var emailMsg;var usernameMsg;var passwordMsg;var confirmMsg;//頁面加載之后，獲取頁面中的對象window.onload = function() { emailObj = document.getElementById('email'); usernameObj = document.getElementById('username'); passwordObj = document.getElementById('password'); confirmObj = document.getElementById('confirm'); emailMsg = document.getElementById('emaileMsg'); usernameMsg = document.getElementById('usernameMsg'); confirmMsg = document.getElementById('confirmMsg');};//3.檢驗整個表單function checkForm() { var bEmail = checkEmail(); var bUsername = checkUsername(); var bPassword = checkPassword(); var bConfirm = checkCondfirm(); return bUsername && bPassword && bConfirm && bEmail;}//4.驗證郵箱function checkEmail() { var regex = /^([a-zA-Z]|[0-9])(w|-)+@[a-zA-Z0-9]+.([a-zA-Z]{2,4})$/; var value = emailObj.value; var msg = ''; if(!value) { msg = '郵箱必須填寫'; } else if (!regex.test(value)) { msg = '郵箱格式不合法'; } emailMsg.innerHTML = msg; emailObj.parentNode.parentNode.style.color = msg == ''?'black':'red'; return msg == '';}//5.驗證用戶名‘function checkUsername() { var regex = /^[a-zA-Z0-9_-]w{0,9}$/; //字母數字下劃線1-10位，不能是數字開頭 var value = usernameObj.value; //獲取usernameObj中的文本 var msg = ''; //最后的提示小事，默認為空 //如果用戶名是null或'',!value的值為false，如果不為空 !value值為true if(!value) { msg = '用戶名必須填寫'; } else if (regex.test(value)) { msg = '用戶名不合法'; } usernameMsg.innerHTML = msg; usernameObj.parentNode.parentNode.style.color = msg == ''?'black':'red'; return msg == ''; //如果提示消息為空則代表沒出錯，返回true}//6.驗證密碼function checkPassword() { var regex = /^.{6,16}$/; //任意字符，6-16位 var value = passwordObj.value; var msg = ''; if(!value) { msg = '密碼必須填寫'; } else if (!regex.test(value)) { msg = '密碼不合法'; } passwordMsg.parentNode.parentNode.style.color = msg == ''?'black':'red'; return msg == '';}//7.驗證確認密碼function checkCondfirm() { var passwordValue = passwordObj.value; var confirmValue = confirmObj.value; var msg = ''; if(!confirmValue) { msg = '確認密碼填寫'; } else if (passwordValue != confirmValue) { msg = '密碼必須保持一致'; confirmMsg.innerHTML = msg; confirmObj.parentNode.parentNode.style.color = msg == ''?'black':'red'; return msg == '';}
以下代碼是簡單的測試郵箱是否匹配成功的代碼，可根據下面來實現具體的邏輯
<!DOCTYPE html><html lang='zh-CN'><head> <meta charset='UTF-8'> <title>Document</title></head><body> <input type='text' placeholder='請輸入郵箱' id='email'></body><script> email.onchange = function(){ var email = this.value; var reg = /^([a-zA-Z]|[0-9])(w|-)+@[a-zA-Z0-9]+.([a-zA-Z]{2,4})$/; if(reg.test(email)){ alert('郵箱格式正確'); }else{ alert('郵箱格式不正確'); } }</script></html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備