當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端表单验证总结

發布時間：2023/12/20 HTML 26 豆豆

生活随笔收集整理的這篇文章主要介紹了前端表单验证总结小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言：自己正在學習前端基礎，學完了想做一個綜合性的項目驗證自己所學，在做這個項目的過程中也學到了很多其他的。
項目簡述：做一個用戶注冊界面，采用HTML+CSS+JS對用戶填寫的信息做一個簡單的驗證并給出相應提示/警告信息。
在每一項只展示當前用到的部分代碼完整代碼在文章末給出
1.文本輸入框對齊
在文本輸入框前加一個label 并且把他的長度設為一個定值（根據你的文本輸入框前的信息而定）右對齊
如下：

.K{ float: left; width: 10em; margin-right: 1em; text-align: right; }<label class="K">通行證用戶名：</label><input type="text" id="name" name="name" onfocus="remind(txz.name)" onblur="user_name(txz.name)">

效果如圖：

2.文本框后面給出提示信息
之前用表格寫的時候，分成三列，中間加一個文本框，最后一列加一個空label 命名一個ID 觸發時間之后通過document.getElementById("").innerHTML="";的方式,這次用表單寫發現不行。嘗試了一下子div 發現可以。

//我是先用style 規定他的提示信息在同一行不跨行 .D{display: inline}<input type="password" id="mm" onFocus="remind(txz.mm)" onBlur="user_password(txz.mm)"><div id="wrongmessagemm" class="D"></div><br><br> // js里這樣寫至于ID為什么填這個后面會提到 document.getElementById(as).innerHTML="用戶名長度大于4小于10,不可以有特殊符號";

效果入圖：

3.js函數傳參以及封裝性
與Java c等語言同的是：在JS函數里的形參不用規定類型他就直接是HTML句柄中寫的東西。
比如：

<label class="K">通行證用戶名：</label><input type="text" id="name" name="name" onfocus="remind(txz.name)" onblur="user_name(txz.name)">@163.com<div id="wrongmessagename" class="D"></div><br><br> //命名每個提示框后面的div為輸入框“wrongmessage”+ID 這樣就可以封裝一個函數實現對每個文本框監測function remind(target1){ //參數可以隨便命名var as="wrongmessage"+target1.id; //獲取后面提示信息所用的div的IDvar h=user_name(target1); //h用來接收函數返回值switch(target1.id){case "name": if(h===0) //這個是對用戶輸入內容檢測如果輸入格式不對執行這個document.getElementById(as).innerHTML="用戶名長度大于4小于10,不可以有特殊符號";if(h===1)document.getElementById(as).innerHTML="輸入正確";break;

注意的是在另一個函數調用這個函數的返回值的時候要用一個var 接收不可以直接寫

4.在JS中改變輸入框/按鈕屬性狀態
1.采用document.getElementById(“sm”).Attribute(“disabled”，“true”);
obj.Attribute(“屬性名”,“狀態”)
2.直接給那個文本框/按鈕賦值

//在這里是設置提交按鈕不可點 document.getElementById("submit").disabled=false; 測試這里的false不可以加雙引號

5.完整代碼
HTML部分代碼：

<!doctype html> <html> <head> <meta charset="utf-8"> <title>網易通行證</title> <style type="text/css">table { border-color:#b6ff00; border-collapse: collapse;}#kt{font-family: "楷體";color: #793BB3}.K{ float: left; width: 10em; margin-right: 1em; text-align: right; }.D{display: inline} </style> <script type="text/javascript" src="Untitled-1.js"></script> </head><body><h1 align="center" id="kt" >網易通行證</h1><table border="1" align="center"><tr><td><form id="txz" name="txz" method="post" action=""><label class="K">通行證用戶名：</label><input type="text" id="name" name="name" onfocus="remind(txz.name)" onblur="user_name(txz.name)">@163.com<div id="wrongmessagename" class="D"></div><br><br><label class="K">登錄密碼：</label><input type="password" id="mm" onFocus="remind(txz.mm)" onBlur="user_password(txz.mm)"><div id="wrongmessagemm" class="D"></div><br><br><label class="K">重復登錄密碼：</label><input type="password" id="sm" onFocus="remind(txz.sm)" onBlur="check(txz.sm)" disabled="disabled"><div id="wrongmessagesm" class="D"></div><br><br><label class="K">性別：</label><input type="radio" name="RadioGroup1" value="男" id="RadioGroup1_0">男<input type="radio" name="RadioGroup1" value="女" id="xb">女<br><br><label class="K">真實姓名：</label><input type="text" id="realname" onFocus="remind(txz.realname)"><div id="wrongmessagerealname" class="D"></div><br><br><label class="K">昵稱：</label><input type="text" id="wyname" onFocus="remind(txz.wyname)"><div id="wrongmessagewyname" class="D"></div><br><br><label class="K">關聯手機號：</label><input type="text" id="phone" onFocus="remind(txz.phone)" onBlur="pnumber(txz.phone)"><label id="wrongmessagephone"></label><br><br><label class="K">保密郵箱：</label><input type="text" id="Email" onFocus="remind(txz.Email)" onBlur="email_check(txz.Email)"><div id="wrongmessageEmail" class="D"></div><br><br><center><input type="submit" id="submit" value="注冊" disabled="true"></center></form></td></tr></table></body> </html>

JS部分代碼

// JavaScript Documentfunction remind(target1){ //參數可以隨便命名var as="wrongmessage"+target1.id; //獲取后面提示信息所用的div的IDvar h=user_name(target1);var j=pnumber(target1);var m=user_password(target1);var e=email_check(target1);var c=check(target1);//document.getElementById("submit").disabled=false; 測試這里的false不可以加雙引號 switch(target1.id){case "name": if(h===0)document.getElementById(as).innerHTML="用戶名長度大于4小于10,不可以有特殊符號";if(h===1)document.getElementById(as).innerHTML="輸入正確";break;case "mm":if(m===0)document.getElementById(as).innerHTML="密碼不可以有特殊符號，且長度在6-14之間";if(m===1){document.getElementById("sm").removeAttribute("disabled");document.getElementById(as).innerHTML="輸入格式正確";}break;case "sm":if(c===0)document.getElementById(as).innerHTML="請重復密碼 ";if(c===1)document.getElementById(as).innerHTML="ok";break;case "realname":document.getElementById(as).innerHTML="請輸入真實姓名";break;case "wyname":document.getElementById(as).innerHTML="給自己想一個昵稱吧";break;case "phone":if(j===0)document.getElementById(as).innerHTML="輸入手機號以便接受驗證碼";if(j===1)document.getElementById(as).innerHTML="輸入正確";break;case "Email":if(e===0)document.getElementById(as).innerHTML="填寫常用的個人郵箱(163郵箱)";if(e===1)document.getElementById(as).innerHTML="正確輸入";break;}if(h===1&&m===1&&e===1&&j===1&&c===1)document.getElementById("submit").disabled=false;} //檢查手機號格式完成 function pnumber(target) {var as="wrongmessage"+target.id;//alert(target.value.length);if(target.value.length===11){for(let i=0;i<11;i++){if(target.value.charCodeAt(i)<48||target.value.charCodeAt(i)>58){document.getElementById(as).innerHTML="手機號必須為純數字";return 0;}}document.getElementById(as).innerHTML="正確輸入";return 1;}else{document.getElementById(as).innerHTML="手機號長度錯誤";return 0;} } //判斷用戶名完成 function user_name(tt) {var as="wrongmessage"+tt.id;var a=firstcode(tt.value,0);var b=strlength(tt,4,20); //必須設置一個值接收函數返回值if(a===0){document.getElementById(as).innerHTML="要以數字或字母開頭";return 0;}else{if(b===0){document.getElementById(as).innerHTML="長度要在4,20之間";return 0;}document.getElementById(as).innerHTML="正確輸入";return 1;} } //判斷密碼長度在6到14之間僅僅為數字或字母完成 function user_password(pa) {var as="wrongmessage"+pa.id;var a=special(pa.value,pa.value.length);var b=strlength(pa,6,14); var l=pa.value.length;if(b===0){document.getElementById(as).innerHTML="長度要在6,14之間"; return 0;}else{if(a===0){document.getElementById(as).innerHTML="密碼僅可為數字或字母";return 0;}document.getElementById(as).innerHTML="正確輸入";document.getElementById("sm").removeAttribute("disabled");return 1;} } //判斷驗證密碼是否與密碼一致 function check(str1) {var as="wrongmessage"+str1.id;var str2=document.getElementById("mm").value;if(str1.value==str2){document.getElementById(as).innerHTML="正確輸入";return 1;}else{document.getElementById(as).innerHTML="與原密碼不符";return 0;} } //判斷郵箱格式 @之前必須為數字字母 @以后為@163.com function email_check(target2) {var as="wrongmessage"+target2.id;var f=target2.value.indexOf("@");var s=special(target2.value,f);var str=target2.value.substring(f,target2.value.length);if(s===0){document.getElementById(as).innerHTML="郵箱組成僅為字母數字@.";return 0;}else{if(str=="@163.com"){document.getElementById(as).innerHTML="正確輸入";return 1;}else{document.getElementById(as).innerHTML="必須以@163.com結尾";return 0;}} } //判斷字符串長度 function strlength(target,min,max) {if(target.value.length<min||target.value.length>max)return 0;elsereturn 1; } //驗證首字母 function firstcode(str,i) {if(str.charCodeAt(i)>=48&&str.charCodeAt(i)<=57)return 1;else if(str.charCodeAt(i)>=65&&str.charCodeAt(i)<=90)return 1;else if(str.charCodeAt(i)>=97&&str.charCodeAt(i)<122)return 1;elsereturn 0; } //判斷有無特殊字符若有則返回0 若無則返回1 function special(str1,th) //th為第幾位判斷到這個數組的第幾位 {for(let i=0;i<th;i++){if(firstcode(str1,i)===0){return 0;}return 1;} }

總結

以上是生活随笔為你收集整理的前端表单验证总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

表单

上一篇：如何通俗易懂地解释欧拉公式（e^πi+1
下一篇：火狐和谷歌Google Chrome