文章目錄
-
目錄
本章目標
一.表單驗證概述
二.表單選擇器
屬性過濾選擇器?
?三.表單驗證
?表單驗證的方法
總結
本章目標
- 掌握String對象的用法
- 會使用表單選擇器的選擇頁面元素
- 會使用JQuery事件進行表單驗證
- Ajax的概念和作用
一.表單驗證概述
前端中的表單驗證是在用戶提交表單之前，對用戶輸入的數據進行合法性檢查的過程。這種驗證的目的是確保用戶輸入的數據符合預期的要求，從而減少錯誤和無效的數據提交，提高數據的質量和準確性。
表單驗證可以分為多種類型，包括但不限于：
- 輸入類型的驗證：檢查用戶輸入的數據是否符合預期的輸入類型，如文本、數字、郵箱、密碼等。
- 必填字段的驗證：確保用戶必須填寫某些字段，這些字段通常是表單中的關鍵信息。
- 日期和時間范圍的驗證：檢查用戶輸入的日期或時間是否在允許的范圍內。
- 步長的驗證：對于某些需要遞增或遞減的輸入字段，如價格、評分等，驗證其步長是否符合要求。
- 字符長度的驗證：檢查用戶輸入的字符長度是否在規定的范圍內。
- 數值范圍的驗證：檢查用戶輸入的數值是否在允許的范圍內。
- 正則表達式的驗證：使用正則表達式對用戶輸入的數據進行復雜的模式匹配和驗證。
在前端中，表單驗證可以通過多種技術實現，如HTML5的內置驗證、JavaScript驗證庫（如jQuery Validation Plugin）以及自定義的JavaScript代碼。其中，JavaScript是實現表單驗證的常用工具之一，它可以在數據被送往服務器前對HTML表單中的輸入數據進行驗證，從而減輕服務器的負擔并提高用戶體驗。
二.表單選擇器
<!DOCTYPE html>
<html>
<head> <title>表單選擇器示例</title>
</head>
<body> <form id="myForm"> <label for="name">姓名:</label> <input type="text" id="name" name="name"><br><br> <label>性別:</label> <input type="radio" id="male" name="gender" value="male"> <label for="male">男</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label><br><br> <label>興趣愛好:</label> <input type="checkbox" id="reading" name="hobby" value="reading"> <label for="reading">閱讀</label><br> <input type="checkbox" id="travel" name="hobby" value="travel"> <label for="travel">旅行</label><br> <input type="checkbox" id="coding" name="hobby" value="coding"> <label for="coding">編程</label><br><br> <input type="submit" value="提交"> </form> <script src="jq/jquery-3.7.1.js"></script><script type="text/javascript">$(document).ready(function(){//選中標簽id=myForm中所有的input、button，select，textarea元素$("#myForm :input").css("background-color","aqua") });</script>
</body>
</html>
屬性過濾選擇器?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端表單示例</title>
</head>
<body>
<form> <!-- 下拉框 --> <label for="country">選擇國家:</label> <select id="country" name="country"> <option value="usa">美國</option> <option value="china">中國</option> <option value="france">法國</option> <option value="germany">德國</option> </select> <br><br> <!-- 單選按鈕 --> <label>選擇性別:</label> <br> <input type="radio" id="male" name="gender" value="male"> <label for="male">男</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label><br> <br> <!-- 多選按鈕 --> <label>選擇你感興趣的運動:</label> <br> <input type="checkbox" id="football" name="sport" value="football"> <label for="football">足球</label><br> <input type="checkbox" id="basketball" name="sport" value="basketball"> <label for="basketball">籃球</label><br> <input type="checkbox" id="swimming" name="sport" value="swimming"> <label for="swimming">游泳</label><br> <br> <!-- 提交按鈕 --> <input type="submit" value="提交">
</form>
<script src="jq/jquery-3.7.1.js"></script>
<script type="text/javascript">$(function(){//使用屬性選擇器selected選中標簽select中選中的option并存貯在變量slist中var slist = $("#country :selcted");//使用each()函數遍歷slist并調用函數slist.each(function(){使用html()函數編譯選中的option標簽并保存在變量message中var messsage = $(this).html();window.alert(message);});});
</script>
</body>
</html>?三.表單驗證
?演示案例
<!DOCTYPE html>
<html>
<head> <title>表單選擇器示例</title>
</head>
<body> <form id="myForm"> <label for="name">賬號:</label> <input type="text" id="name" name="name" value=""><br><br> <label>性別:</label> <input type="radio" id="male" name="gender" value="male"> <label for="male">男</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label><br><br> <label>興趣愛好:</label> <input type="checkbox" id="reading" name="hobby" value="reading"> <label for="reading">閱讀</label><br> <input type="checkbox" id="travel" name="hobby" value="travel"> <label for="travel">旅行</label><br> <input type="checkbox" id="coding" name="hobby" value="coding"> <label for="coding">編程</label><br><br> <input type="submit" value="提交"> </form> <script src="jq/jquery-3.7.1.js"></script><script type="text/javascript">$(document).ready(function(){//點擊表單中的提交按鈕時調用函數$("#myForm").submit(function(){// $("#myForm :text")選中表單中的文本框并使用val()提取標簽中的value值并儲存在變量user中var user = $("#myForm :text").val();//判斷賬號是否為空if(user==""){window.alert("賬號不能為空！");//結合當前方法并返回false的值return false;}if(user.indexOf("@")==-1){window.alert("User格式錯誤，必須包含@符號");return false;}var pwd = $("#myForm :password").val();//使用for循環遍歷密碼框中的每個字符for(var i=0;i<pwd.length;i++){//使用substring(i,i++)函數提取i位置到i+位置的數字不包含i+1var s = pwd.subtring(i,i++);//使用isNaN(s)判斷該變量是否為字符串if(isNaN(s) == false){window.alert("密碼框內不允許出現數字");return false;}});});</script></body>
</html>
?表單驗證的方法
)
