本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)表單驗(yàn)證功能的具體代碼，供大家參考，具體內(nèi)容如下
以下是JavaScript的表單驗(yàn)證功能，可根據(jù)JS代碼編寫出你想要的HTML和CSS的代碼。
關(guān)于正則表達(dá)式的使用，以及常用的正則表達(dá)式，筆者目前還在整理中，后期整理完成后，會(huì)將鏈接放在下面，供大家一起學(xué)習(xí)。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
//1.聲明變量var emailObj;var usernameObj;var passwordObj;var confirmObj;var emailMsg;var usernameMsg;var passwordMsg;var confirmMsg;//頁面加載之后，獲取頁面中的對(duì)象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.檢驗(yàn)整個(gè)表單function checkForm() { var bEmail = checkEmail(); var bUsername = checkUsername(); var bPassword = checkPassword(); var bConfirm = checkCondfirm(); return bUsername && bPassword && bConfirm && bEmail;}//4.驗(yàn)證郵箱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.驗(yàn)證用戶名‘function checkUsername() { var regex = /^[a-zA-Z0-9_-]\w{0,9}$/; //字母數(shù)字下劃線1-10位，不能是數(shù)字開頭 var value = usernameObj.value; //獲取usernameObj中的文本 var msg = ""; //最后的提示小事，默認(rèn)為空 //如果用戶名是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 == ""; //如果提示消息為空則代表沒出錯(cuò)，返回true}//6.驗(yàn)證密碼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.驗(yàn)證確認(rèn)密碼function checkCondfirm() { var passwordValue = passwordObj.value; var confirmValue = confirmObj.value; var msg = ""; if(!confirmValue) { msg = "確認(rèn)密碼填寫"; } else if (passwordValue != confirmValue) { msg = "密碼必須保持一致"; confirmMsg.innerHTML = msg; confirmObj.parentNode.parentNode.style.color = msg == ""?"black":"red"; return msg == "";} |
以下代碼是簡(jiǎn)單的測(cè)試郵箱是否匹配成功的代碼，可根據(jù)下面來實(shí)現(xiàn)具體的邏輯
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="text" placeholder="請(qǐng)輸入郵箱" 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> |
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/qq_44723773/article/details/110825757
