知識點：掌握string對象的用法、會使用正則表達式驗證頁面輸入內容、會使用表單選擇器。
1、表單基本驗證技術
無論是動態網站，還是其他 B/S 結構的系統，都離不開表單。表單作爲客戶端向服務器端提交數據的主要載體，如果提交的數據不合法，將會引出各種各樣的問題，那麼如何避免這樣的問題暱？
1.1 表單驗證的必要性
有時，在用戶填寫表單時，我們希望所填入的資料必須是某特定類型的信息（如 int)，或是填入的值必須在某個特定的範圍之內（如月份必須是 1~12)。在正式提交表單之前，必須檢査這些值是否有效。
1.2 表單驗證的兩種方式
我們先來了解一下什麼是客戶端驗證和服務器端驗證。客戶端驗證實際上就是在已下載的頁面中，當用戶提交表單的時候，它直接在頁面中調用腳本來進行驗證，這樣可以減少服務器端的運算。而服務器端的驗證則是將頁面提交到服務器，由服務器端的程序對提交的表單數據進行驗證，然後再返回響應結果到客戶端，如圖所示。服務器端驗證的缺點是每一次驗證都要經過服務器，不但消耗時間較長，而且會大大增加服務器的負擔。
那麼到底是在客戶端驗證好還是在服務器端驗證好呢？下面先來看一個例子。假如有一個網站，每天大約有 10000 名用戶註冊使用它的服務，如果用戶填寫的表單信息都讓服務器去檢查是否有效，服務器就得每天爲 10000 名用戶的表單信息進行驗證，這樣服務器將會不堪重負，甚至會出現死機現象。所以最好的解決辦法就是在客戶端進行驗證，這樣就能把服務器端的任務分給多個客戶端去完成，從而減輕服務器端的壓力，讓服務器專門做其他更重要的事情。
基於以上原因，我們需要使用 JavaScript 在客戶端對錶單數據進行驗證。
1.3 表單驗證的內容
在學習表單驗證之前，我們需要好好想想，在表單驗證過程中會遇到哪些需要控制的地方。就像軟件工程思想一樣，先分析一下要在哪些方面進行驗證。
其實，表單驗證包括的內容非常多，如驗證日期是否有效或日期格式是否正確，檢查表單元素是否爲空、Email 地址是否正確，驗證身份證號，驗證用戶名和密碼，驗證字符串是否以指定的字符開頭、阻止不合法的表單被提交等。下面我們就以常用的註冊表單爲例，來 說明表單驗證通常包括哪些內容。
- 檢查表單元素是否爲空（如名字和姓氏不能爲空)。
- 驗證是否爲數字（如出生日期中的年月日必須爲數字)。
- 驗證用戶輸入的郵件地址是否有效（如電子郵件地址中必須有@和.字符)。
- 檢查用戶輸入的數據是否在某個範圍之內（如出生日期中的月份必須是 1~12，日期必須爲 1~31)。
- 驗證用戶輸入的信息長度是否足夠（如輸入的密碼必須大於等於 6 個字符)。
- 檢査用戶輸入的出生日期是否有效（如出生年份由 4 位數字組成，1、3、5、7、8、 10、12 月爲 31 天，4、6、9、11 月爲 30 天，2 月根據是否是潤年判斷爲 28 天或 29 天)。
實際上，在設計表單時，還會因情況不同而遇到其他很多不同的問題，這就需要我們自己去定義一些規定和限制。
1.3 表單驗證的思路
在網上進行註冊或填寫一些表單數據時，如果數據不符合要求，通常會進行提示。例如，在註冊頁面輸入了不合要求的電子郵箱地址時，將會彈出提示信息，如圖所示。 那麼這些提示信息在什麼情況下會彈出？如何編寫 JavaScript 來驗證表單數據的合法性？
(1) 首先獲取表單元素的值，這些值一般都是 String 類型，包含數字、下劃線等。
(2) 使用 JavaScript 中的一些方法對獲取的 String 類型的數據進行判斷。
(3) 表單 form 有一個事件 onsubmit，它是在提交表單之前調用的，因此可以在提交表單時觸發 onsubmit 事件，然後對獲取的數據進行驗證。
1.3.1 使用string對象驗證郵箱
在【使用jQuery簡化客戶端開發】第一課：初步瞭解JavaScript，掌握JavaScript基礎語法，已經初步接觸了 String 對象的用法，下面結合電子郵件格式的驗證這一應用場景，進一步鞏固它的用法。
在註冊表單或登錄電子郵箱時，經常需要填寫 Email 地址，對輸入的 Email 地址進行有效性驗證，可以提高數據的有效性，避免不必要的麻煩。那麼如何編寫驗證表單呢？當在如圖 所示的 Email 文本框中沒有輸入任何內容單擊“登錄”按鈕時，將會彈出提示對話框，提示“Email 不能爲空”；當輸入”webmaster"再單擊“登錄”按鈕時，將會彈出對話框提示“Email 格式不正確必須包含@”；當輸入“webmaSter@”時，再單擊“登錄”按鈕，將會彈出對話框提示“Email 格式不正確必須包含.”。只有在 Email 地址中包含“@”和“.”符號時，其纔是有效的 Email 地址。那麼如何編寫這樣的 Email 地址驗證腳本呢？參照內容：【jQuery】第一課：案例實踐——運用JavaScript製作郵箱驗證
思路分析
(1) 先獲取表單元素（Email 文本框）的值（String 類型），然後進行判斷。
(2) 使用 jQuery ID 選擇器獲得表單的輸入元素（文本框對象），然後使用 jQuery 的val()方法獲取文本框的值。
(3) 使用字符串方法(indexOf())來判斷獲得的文本框元素的值是否包含“@”和“.” 符號。
(4) 判斷表單元素的值是否爲空、是否包含“@”和“.”符號的腳本函數之後， 該如何調用編寫好的腳本函數？其實，Email 地址的有效性驗證發生在單擊“登錄”按鈕之後，所以該事件是在提交表單時產生的，應該使用提交按鈕來觸發 onsubmit 事件，然後調用腳本函數執行。使用 jQuery 後，可以相應地使用 jQuery 封裝的事件方法 submit()，它對應的是 onsubmit 事件。
(5) 當調用腳本函數驗證表單數據時，如何判斷表單是否被提交呢？表單的 onsubmit 事件根據函數返回值是 true 還是 false 來決定是否提交表單。當返回值是 false 時，不能提交表單，當返回值是 true 時提交表單。
案例代碼：
（1）製作第一個登錄頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>王迪-使用string對象驗證郵箱</title>
<style type="text/css">
#login { margin: 10px auto; background-color:lightpink; width: 400px; text-align: center; padding: 10px;}
#about {margin: 40px auto; width: 400px; text-align: center;}
#about a { text-decoration: none; color: black;}
</style>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//定義一個函數check，用來檢驗用戶是否在輸入框裏輸入正確內容，如果輸入正確，返回true，否則返回false
function check(){
var mail = $("#email").val();//使用id選擇器email，獲取輸入框的信息，並將其存儲在變量mail裏
//使用多重if語句，進行判斷
if(mail == ""){
alert("郵箱地址不能爲空！");
return false;
}
else if(mail.indexOf("@") == -1){
alert("郵箱地址必須包含@符號");
return false;
}
else if(mail.indexOf(".") == -1){
alert("郵箱地址必須包含.符號");
return false;
}
else{
return true;
}
}
$(document).ready(function(){
$("#myform").submit(function(){
return check();
})
})
</script>
</head>
<body>
<div id="login">
<h2>登錄樂樂網</h2>
<form action="new_success.html" method="get" id="myform"><!--這裏注意路徑的設置-->
Email：<input type="text" id="email" /><br /><br />
密 碼：<input type="password" id="pwd" /><br /><br />
<input type="submit" value="登錄" />
</form>
</div>
<div id="about">
<a href="#">關於我們</a> | <a href="#">誠聘英才</a> | <a href="#">聯繫方式</a> | <a href="#">幫助中心</a>
</div>
</body>
</html>
代碼分析：
1）return 語句會終止函數的執行並返回函數的值。
- retrun true； 返回正確的處理結果。
- return false；返回錯誤的處理結果，終止處理。
- return；把控制權返回給頁面。
- 在js中，我們通常用return false來阻止提交表單或者繼續執行下面的代碼，通俗來說就是阻止執行默認的行爲。
2）val()方法：
val() 方法返回或設置被選元素的 value 屬性。
3）submit()方法：
當提交表單時，會發生 submit 事件。該事件只適用於 <form> 元素。submit() 方法觸發 submit 事件，或規定當發生 submit 事件時運行的函數。
（2）製作第二個登錄成功頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#tishi { margin: 10px auto; width: 400px; text-align: center; padding: 10px;}
#tishi a { text-decoration: none; color: black;}
</style>
</head>
<body>
<div id="tishi">
<h2>成功登錄樂樂網！！！</h2>
<a href="#">關於我們</a> | <a href="#">誠聘英才</a> | <a href="#">聯繫方式</a> | <a href="#">幫助中心</a>
</div>
</body>
</html>
- 注意：在本地電腦進行郵箱提交驗證時，如果出現錯誤提示：“內部服務器錯誤”
- 原因分析：method="post" post需要你有服務器去處理post請求，而我們本地練習時，一般是沒有服務器的。
- 解決辦法：使用method="get"提交就可以了，有內置的服務器。
1.3.1 文本框內容的驗證
在網站的註冊等頁面中，除了要經常驗證電子郵件的格式之外，用戶名、密碼等文本內容也經常需要驗證。例如，驗證文本框的內容不能爲空，註冊頁面中兩次輸入的密碼必須相同，下面通過驗證如圖 所示的頁面來學習如何驗證文本框內容的合法性。
要求：
- 密碼不能爲空，並且密碼包含的字符不能少於 6 個。
- 兩次輸入的密碼必須一致。
- 姓名不能爲空，並且姓名中不能有數字。
思路分析：
(1) 首先創建頁面並插入一個表單，在表單中插入如上圖所示的文本框，密碼輸入框的 id 分別爲 pwd 和 repwd，姓名文本框的 id 爲 user，最後編寫腳本驗證文本輸入框中內容的有效性。
(2) 使用 String 對象的 length 屬性驗證密碼的長度。
(3) 驗證兩次輸入密碼是否一致。當兩個輸入框的內容相同時，表示一致。
(4) 判斷姓名中是否有數字。首先使用 length 屬性獲取文本長度，然後使用 for循環和 substring()方法依次截斷單個字符，最後判斷每個字符是否是數字。
案例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>王迪-文本框內容驗證</title>
<style type="text/css">
#zhuce { margin: 10px auto; width: 400px; text-align: center; padding: 10px; background-color: gainsboro;}/*設置div樣式,使其居中*/
p span{ text-align: right; display: inline-block; width: 100px;}/*設置span的display屬性爲inline-block,使其可以設置寬高屬性，統一設置寬度，處理文字長度不等的情況*/
p input { margin-left: 20px;}
.btn { background-color:orangered; width: 80px; height: 30px; font-size: 20px;}/*給按鈕設置一下背景顏色/寬高/字體大小屬性，使其看起來好看一些*/
</style>
<script src="js/jquery-3.4.1.min.js"></script><!--引入jquery-->
<script>
//定義一個函數，用來檢驗，用戶填寫的內容，是否符合要求
function check(){
var pwd = $("#pwd").val();//獲取id爲pwd的元素的值，並將其存儲在變量pwd裏
if(pwd == ""){
alert("密碼不能爲空");
return false;
}
if(pwd.length < 6){
alert("密碼長度，必須大於等於6個字符");
return false;
}
var repwd = $("#repwd").val();//獲取id爲repwd的元素的值，並將其存儲在變量repwd裏
if(pwd != repwd){
alert("兩次輸入的密碼不一致");
return false;
}
var user = $("#user").val();//獲取id爲user的元素的值，並將其存儲在變量repwd裏
if(user == ""){
alert("姓名不能爲空");
return false;
}
for(var i = 0 ; i<user.length ; i++){//使用for循環，依次判斷姓名字符串裏的，每一個字符
var j = user.substring(i,i+1);//使用字符串的substring()方法，一次返回一個字符，根據循環變量i的改變，依次獲取每個字符，並將其存儲在變量j裏
if( isNaN(j) == false){//使用isNaN()方法，判斷變量j，如果返回false，說明j有可能是數字、空格、布爾值
alert("姓名中不能包含數字或空格");
return false;
}
}
return true;
}
$(document).ready(function(){
$("#myform").submit(function(){//當提交表單時，會發生 submit 事件。該事件只適用於 <form> 元素。submit() 方法觸發 submit 事件，或規定當發生 submit 事件時運行的函數。
return check();
})
})
</script>
</head>
<body>
<div id="zhuce">
<h2>註冊樂樂網</h2>
<form method="get" action="" id="myform">
<p><span>輸入密碼:</span><input type="text" id="pwd" /></p><!--這裏爲了方便測試，所以把密碼框設置的text類型，實際中一般設置爲password-->
<p><span>再次輸入密碼:</span><input type="text" id="repwd" /></p>
<p><span>您的姓名:</span><input type="text" id="user" /></p>
<p><input type="submit" value="註冊" class="btn" /></p>
</form>
</div>
</body>
</html>
1.4 校驗提示特效
在在網上註冊或填寫各種表單時，經常會有某些文本框中顯示自動提示信息，如圖所示的 Email 自動提示文本。當單擊此文本框時提示文本自動被清除，文本框的效果發生變化。
1.4.1 表單驗證事件和方法
文本框作爲一個 HTML DOM 元素，可以應用 DOM 相關的方法和事件，通過這些方法和事件可改變文本框的效果。
|
類別 |
名稱 |
描述 |
|
事件 |
onblur |
失去焦點，當光標離開某個文本框時觸發 |
|
onfocus |
獲得焦點，當光標進入某個文本框時觸發 |
|
|
方法 |
blur() |
從文本域中移開焦點 |
|
focus() |
在文本域中設置焦點，即獲得鼠標光標 |
|
|
select() |
選取文本域中的內容，突出顯示輸入區域的內容 |
案例練習1：運用focus()方法，製作郵箱輸入框提示內容
案例說明：此案例是在上一個【登錄】案例的基礎上，進行了功能的補充，要求，郵箱輸入框裏，默認有提示文字“請輸入正確的電子郵箱”，當用戶單擊輸入框時，提示文字消失。當用戶點擊登錄時，依然會按照之前的規則進行判斷。
案例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>王迪-郵箱提示內容</title>
<style type="text/css">
#login { margin: 10px auto; background-color:lightpink; width: 400px; text-align: center; padding: 10px;}
#about {margin: 40px auto; width: 400px; text-align: center;}
#about a { text-decoration: none; color: black;}
</style>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//定義一個函數check，用來檢驗用戶是否在輸入框裏輸入正確內容，如果輸入正確，返回true，否則返回false
function check(){
var mail = $("#email").val();//使用id選擇器email，獲取輸入框的信息，並將其存儲在變量mail裏
//使用多重if語句，進行判斷
if(mail == ""){
alert("郵箱地址不能爲空！");
$("#email").focus();//給id爲email的元素，設置焦點，也就是獲得鼠標光標
return false;
}
else if(mail.indexOf("@") == -1 || mail.indexOf(".") == -1){
alert("郵箱地址的格式不正確\n必須包含@符號和.符號");
$("#email").select();//該方法用於選區文本域中的內容，突出顯示輸入區域的內容
return false;
}
else{
return true;
}
}
//定義一個函數clearText，用來判斷，email文本框裏的內容
function clearText(){
var $mail = $("#email");
if($mail.val() == "請輸入正確的電子郵箱"){
$mail.val("");//將值設置爲空，也就是清空輸入框裏默認的文字
$mail.css("borderColor", "#ff0000");//同時，給變量追加css樣式，添加一個背景色
}
}
$(document).ready(function(){
//綁定失去焦點事件
$("#email").focus(clearText);
//提交表單
$("#myform").submit(function(){
return check();
})
})
</script>
</head>
<body>
<div id="login">
<h2>登錄樂樂網</h2>
<form action="new_success.html" method="get" id="myform">
Email：<input type="text" id="email" value="請輸入正確的電子郵箱" /><br /><br />
密 碼：<input type="password" id="pwd" /><br /><br />
<input type="submit" value="登錄" />
</form>
</div>
<div id="about">
<a href="#">關於我們</a> | <a href="#">誠聘英才</a> | <a href="#">聯繫方式</a> | <a href="#">幫助中心</a>
</div>
</body>
</html>
代碼分析：
（1）focus() 方法：當元素獲得焦點時（當通過鼠標點擊選中元素或通過 tab 鍵定位到元素時），發生 focus 事件。 focus() 方法觸發 focus 事件，或規定當發生 focus 事件時運行的函數。 提示：該方法通常與 blur() 方法一起使用。
- 觸發被選元素的 focus 事件：$(selector).focus()；
- 添加函數到 focus 事件：$(selector).focus(function);
（2）select()方法：當 textarea 或文本類型的 input 元素中的文本被選擇（標記）時，會發生 select 事件。 select() 方法觸發 select 事件，或規定當發生 select 事件時運行的函數。
- 觸發被選元素的 select 事件：$(selector).select();
- 添加函數到 select 事件：$(selector).select(function);
案例練習2：運用focus()方法，製作文本輸入提示特效
案例說明：此案例是在上一個【註冊】案例的基礎上，增加了文本輸入提示特效，當用戶輸入的內容不符合要求時，會給出提示。
案例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>王迪-製作文本輸入提示特效</title>
<style type="text/css">
#zhuce { margin: 10px auto; width: 800px; text-align: center; padding: 10px; background-color: gainsboro;}/*設置div樣式,使其居中*/
p span{ text-align: right; display: inline-block; width: 100px;}/*設置span的display屬性爲inline-block,使其可以設置寬高屬性，統一設置寬度，處理文字長度不等的情況*/
p input { margin-left: 20px; width: 200px;}
.btn { background-color:orangered; width: 80px; height: 30px; font-size: 20px;}/*給按鈕設置一下背景顏色/寬高/字體大小屬性，使其看起來好看一些*/
.red { color: red; padding-left: 5px;width: 300px; text-align: left;}/*設置第二個span的樣式*/
</style>
<script src="js/jquery-3.4.1.min.js"></script><!--引入jquery-->
<script>
//定義一個函數check，用來檢驗用戶是否在輸入框裏輸入正確內容，如果輸入正確，返回true，否則返回false
function checkEmail(){
var $mail = $("#email");
var $divID = $("#spanEmail");
$divID.html("");
//使用多重if語句，進行判斷
$divID.html("");
if ($mail.val() == "") {
$divID.html("Email不能爲空");
return false;
}
if ($mail.val().indexOf("@") == -1) {
$divID.html("Email格式不正確，必須包含@");
return false;
}
if ($mail.val().indexOf(".") == -1) {
$divID.html("Email格式不正確，必須包含.");
return false;
}
return true;
}
//驗證輸入密碼
function checkPass() {
var $pwd = $("#pwd");
var $divID = $("#spanPwd");
$divID.html("");
if ($pwd.val() == "") {
$divID.html("密碼不能爲空");
return false;
}
if ($pwd.val().length < 6) {
$divID.html("密碼必須等於或大於6個字符");
return false;
}
return true;
}
//驗證重複密碼
function checkRePass() {
var $pwd = $("#pwd"); //輸入密碼
var $repwd = $("#repwd"); //再次輸入密碼
var $divID = $("#spanRepwd");
$divID.html("");
if ($pwd.val() != $repwd.val()) {
$divID.html("兩次輸入的密碼不一致");
return false;
}
return true;
}
//驗證用戶名
function checkUser() {
var $user = $("#user");
var $divID = $("#spanUser");
$divID.html("");
if ($user.val() == "") {
$divID.html("姓名不能爲空");
return false;
}
for (var i = 0; i < $user.val().length; i++) {
var j = $user.val().substring(i, i + 1)
if (j >= 0) {
$divID.html("姓名中不能包含數字");
return false;
}
}
return true;
}
$(document).ready(function(){
//綁定失去焦點事件
$("#email").blur(checkEmail);//當失去焦點時，調用對應函數，進行檢查
$("#pwd").blur(checkPass);
$("#repwd").blur(checkRePass);
$("#user").blur(checkUser);
//提交表單
$("#myform").submit(function () {
var flag = true;
if (!checkEmail()) flag = false;
if (!checkPass()) flag = false;
if (!checkRePass()) flag = false;
if (!checkUser()) flag = false;
return flag;
});
})
</script>
</head>
<body>
<div id="zhuce">
<h2>註冊樂樂網</h2>
<form method="get" action="" id="myform">
<p><span>Email:</span><input type="text" id="email" /><span class="red" id="spanEmail"></span></p><!--第一個span是輸入框提示文字，第二個span默認沒有內容，根據用戶在輸入框輸入的內容，給出對應提示-->
<p><span>輸入密碼:</span><input type="text" id="pwd" /><span class="red" id="spanPwd"></span></p><!--這裏爲了方便測試，所以把密碼框設置的text類型，實際中一般設置爲password-->
<p><span>再次輸入密碼:</span><input type="text" id="repwd" /><span class="red" id="spanRepwd"></span></p>
<p><span>您的姓名:</span><input type="text" id="user" /><span class="red" id="spanUser"></span></p>
<p><input type="submit" value="註冊" class="btn" /></p>
</form>
</div>
</body>
</html>
代碼分析：
（1）blur() 方法：當元素失去焦點時發生 blur 事件。 blur() 方法觸發 blur 事件，或規定當發生 blur 事件時運行的函數。 提示：該方法常與 focus() 方法一起使用。
爲被選元素觸發 blur 事件：$(selector).blur();
添加函數到 blur 事件：$(selector).blur(function);
2、正則表達式
2.1 爲什麼需要正則表達式
在開發 HTML 表單時經常會對用戶輸入的內容進行驗證。例如，前面驗證郵箱是否正確，當用戶輸入的郵箱是“zs@.”，然後單擊“註冊”按鈕進行 Email 驗證時，檢測的結果卻認爲這是一個正確的郵箱地址。
我們知道這並不是一個正確的郵箱，但檢測卻認爲是正確的，爲什麼會出現這樣的情況呢？因爲我們在驗證郵箱時，只檢測郵箱地址中是否包含符號“@”和“.”，這樣簡單的驗證是不能嚴謹地驗證郵箱是否正確的。下面看一個非常嚴謹的郵箱驗證，如圖所示，當輸入 zs.@sina.時，檢測的結果是電子郵件格式不正確，重新輸入“zs @Sina.c”，檢測結果仍然不正確，當輸入“[email protected]”時檢測通過。
從上面的例子可以看出，必須輸入正確的郵箱地址，否則檢測不能通過。這麼嚴謹的郵件格式驗證，是否需要寫許多代碼來一一地驗證呢？我們看一下這個驗證郵箱地址的代碼。
var email=$("email");
var email_prompt=divId("email_prompt");
email_prompt.innerHTML="";
var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
if(reg.test(email)==false){
email_prompt.innerHTML="Email 格式不正確，例如 [email protected]";
return false;
}
return true;
從上面的代碼可以看到，僅僅用了幾行代碼就實現了這麼嚴謹的驗證，是不是很神奇呢？ 這是如何實現的呢？答案——正則表達式。 實際上，在工作中對錶單的驗證並不是簡單地驗證輸入內容的長度，是否是數字、字母等，通常會驗證輸入的內容是否符合某種格式。
2.1 什麼是正則表達式
正則表達式是一個描述字符模式的對象，它是由一些特殊的符號組成的，這些符號和在SQLServer 中學過的通配符一樣，其組成的字符模式用來匹配各種表達式。
RegExp 對象是 RegularExpression(正則表達式）的縮寫，它是對字符串執行模式匹配的強大工具。簡單的模式可以是一個單獨的字符，複雜的模式包括了更多的字符，如驗證電子郵件地址、電話號碼、身份證號碼等字符串。
通俗的說：正則表達式是一種特殊的字符串模式，用於匹配一組字符串，就好比用模具做產品，而正則就是這個模具，定義一種規則去匹配符合規則的字符。
2.1.1 定義正則表達式
定義正則表達式有兩種形式，一種是普通方式，另一種是構造函數的方式。
1) 普通方式
普通方式的語法格式：var reg=/表達式/附加參數
- 表達式：一個字符串代表了某種規則，其中可以使用某些特殊字符來代表特殊的規則，後面會詳細介紹。
- 附加參數：用來擴展表達式的含義，主要有以下 3 個參數。
- g：代表可以進行全局匹配。
- i：代表不區分大小寫匹配。
- m：代表可以進行多行匹配。
- 特點：腳本加載後，即可得到編譯，如果你的表達式不是變化的，用這種方式效率更高。
上面 3 個參數可以任意組合，代表複合含義，當然也可以不加參數。例如：
var reg=/white/；
var reg=/white/g；
2)構造函數
構造函數方式的語法格式：var reg=new RegExp(“表達式",["附加參數”]);
- 特點：這種方式，在運行時編譯，如果事先不能確定表達式的規則，可使用此方法。
其中表達式與附加參數的含義與上面普通方式中定義的含義相同。例如：
var reg=new RegExp("white")；
var reg=new RegExp("white","g");
說明： 普通方式中的表達式必須是一個常量字符串，而構造函數中的表達式可以是常量字符串， 也可以是一個 JavaScript 變量。例如，根據用戶的輸入作爲表達式的參數：var reg=new RegExp($(“#id").val(),"g");
不管是使用普通方式還是使用構造函數的方式定義正則表達式，都需要規定表達式的模式，那麼怎樣去規定一個表達式呢？
2.1.2 正則表達式的簡單模式和複合模式
從規範上講，表達式的模式分爲簡單模式和複合模式。
1) 簡單模式：簡單模式是指通過普通字符的組合來表達的模式。例如：
var reg=/abc/；//使用簡單模式編寫正則表達式，也就是直接給定普通字符
簡單模式只能表示具體的匹配，平時很少用到。因爲如果要匹配一個郵箱地址或一個電話號碼，就不能使用具體的匹配，這時就用到了複合模式。
2) 複合模式：複合模式是指含有通配符來表達的模式，這裏的通配符與 SQLServer 中的通配符相似。 例如：
var reg=/ab*c/；//使用複合模式編寫的表達式，包含有通配符，這裏的通配符與SQL Server中的通配符相似
其中*是通配符，代表着特殊的含義，因此複合模式可以表達更爲抽象化的規則模式。
案例練習：正則表達式兩種模式的練習
<script>
var str = "abc abbc acbb abcd abbbc";//聲明一個字符串，用來驗證
console.log(str.match(/abc/g));//簡單模式表達式，匹配到2個
console.log(str.match(/ab*c/g));//複合模式表達式，匹配到5個
console.log(str.match(/hello/g));//匹配不到結果時，返回null
</script>
注意：console.log() 方法用於在控制檯輸出信息。 該方法對於開發過程進行測試很有幫助。
2.1.3 正則表達式的常用符號
表1：正則表達式的常用字符
|
符號 |
描述 |
符號 |
描述 |
|
/…/ |
代表一個模式的開始和結束 |
^ |
匹配字符串的開始 |
| [abc] | 查找方括號之間的任何字符。 |
$ |
匹配字符串的結束 |
| [0-9] | 查找任何從 0 至 9 的數字。 |
\d |
匹配一個數字字符，等價於[0-9] |
|
. |
除了換行符之外的任意字符 |
\D |
除了數字之外的任何字符，等價於[^0-9] |
|
\s |
任何空白字符 |
\w |
匹配一個數字、下劃線或字母字符，等價於[A-Za-z0-9_] |
|
\S |
任何非空白字符 |
\W |
任何非單字字符，等價於[^a-zA-z0-9_] |
從前面驗證郵箱的正則表達式可以看出，字符“@”前後的字符可以是數字、字母或下劃線，但是在字符“.”之後的字符只能是字母，那麼{2,3}是什麼意思呢？有時我們會希望某些字符在一個正則表達式中出現規定的次數。
表2：正則表達式的重複字符
|
符號 |
描述 |
|
{n} |
匹配前一項n次 |
|
{n,} |
匹配前一項n次，或者多次 |
|
{n,m} |
匹配前一項至少n次，但是不能超過m次 |
|
* |
匹配前一項0次或多次，等價於{0,} |
|
+ |
匹配前一項1次或多次，等價於{1,} |
|
？ |
匹配前一項0次或1次，也就是說前一項是可選的，等價於{0,1} |
表3：常用正則表達式
| 常用正則表達式 | |
|---|---|
|
用戶名：4到16位 （字母，數字，下劃線，減號） |
/^[a-zA-Z0-9_-]{4,16}$/ |
| 密碼：6到18位 |
/^[a-z0-9_-]{6,18}$/ |
| 電子郵箱： | /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ |
| 手機號碼： |
/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/ |
| 身份證號：(18位) |
/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/ |
| QQ號碼：（5到11位）） | /^[1-9][0-9]{4,10}$/ |
| 十六進制顏色正則： | /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/ |
| 數字正則： | /^-?\d*\.?\d+$/ |
更多正則表達式瞭解：常用正則表達式大全-----用戶名、密碼、郵箱、等數據格式的校驗
正則表達式匹配查詢：（在線查詢）https://rubular.com/
2.1.4 RegExp 對象的常用方法
如何在頁面中使用正則表達式呢？主要是使用RegExp 對象（正則表達式）的方法來進行
|
方法 |
描述 |
|
exec(str) |
exec() 方法用於檢索字符串中的正則表達式的匹配。 如果字符串中有匹配的值，返回該匹配值，否則返回 null。 |
|
test() |
用於檢測一個字符串是否匹配某個模式，如果字符串中含有匹配的文本，則返回 true，否則返回 false。 |
（1）使用exec(str)方法：
<script>
var str = "wuhan";//聲明一個字符串，用來驗證
var reg = /abc/g;//使用普通方式定義一個正則表達式reg
var reg1 = new RegExp("ha","g");//使用構造函數定義一個正則表達式
//調用正則表達式對象的exec()方法
console.log(reg.exec(str));//字符串str中，沒有匹配的字符，返回null
console.log(reg1.exec(str));//返回匹配到的值
</script>
（2）使用test(str)方法：
案例練習：將上一個案例的exec方法，換成test方法，看一下結果
2.1.4 string對象的常用方法
JavaScript 除了支持 RegExp 對象的正則表達式方法外，還支持 String 對象的正則表達式方法。String 對象定義了使用正則表達式來執行強大的模式匹配和文本檢索與替換函數的方法。String 對象的方法如表所示：
|
方法 |
描述 |
|
match() |
找到一個或多個正則表達式的匹配 |
|
search() |
檢索與正則表達式相匹配的值 |
|
replace() |
替換與正則表達式匹配的字符串 |
|
split() |
把字符串分割爲字符串數組 |
（1）match(正則表達式)方法：
match(reg) 方法將檢索字符串 String Object，以找到一個或多個與 RegExp 匹配的文本。這個方法的行爲在很大程度上有賴於 RegExp 是否具有標誌 g。如果RegExp 沒有標誌 g，那麼 match() 方法就只能在 stringObject 中執行一次匹配。如果沒有找到任何匹配的文本， match() 將返回 null。否則，它將返回一個數組，其中存放了與它找到的匹配文本有關的信息。
<script>
var str = "abbc abc acd abcd abbbc";//聲明一個字符串，用來驗證
var reg = /abc/g;//該正則表達式有參數g
var reg1 = new RegExp("abc");//該正則表達式沒有參數g
console.log(str.match(reg));//有g選項，會全局搜索，把所有符合結果的都顯示
console.log(str.match(reg1));
</script>
注意：match()方法裏的參數，可以是正則表達式，也可以是RegExp對象實例。
（2）search(正則表達式)方法：
search(reg) 方法用於檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串。 如果沒有找到任何匹配的子串，則返回 -1。如果找到了，則返回匹配成功的第一個位置。
<script>
var str = "abc acd acbd acbbd abbbc";//聲明一個字符串，用來驗證
console.log(str.search(/cd/));//參數可以是正則表達式，也可以值RegExp對象
console.log(str.indexOf("cd"));//如果只是查找固定字符串，那麼search方法和indexof方法，都可以實現
//如果要查詢以c開頭，中間有0個或多個b，最後以d結尾
console.log(str.search(/cb*d/));//只查詢第一個滿足
console.log(str.indexOf("/cb*d/"));//indexOf方法不支持正則表達式查詢，此時返回-1
</script>
注意：indexOf()方法和search()方法的區別。
（3）replace()方法：
replace(reg,'str') 方法用於在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。
<script>
var str = "abc acd acbd acbbd abbbc";//聲明一個字符串
str.replace("c","x");//給str對象使用replace方法，將c替換成x
console.log(str);//輸出str，發現並沒有實現預期效果，replace方法，不會改變原字符串
//將replace方法的結果，存儲在變量str2裏，然後輸出str2
var str2 = str.replace("c","x");
console.log(str2);
console.log(str.replace("c","x"));
//只把第一個c完成了替換
//如果想實現整個字符串都替換，使用正則表達式，同時使用參數g
console.log(str.replace(/c/g,"x"));
</script>
（4）split()方法：
split(reg,[maxLength]) 方法用於把一個字符串分割成字符串數組。 maxLength參數可選，限制返回結果的最大數量。提示： 如果把空字符串 ("") 用作 separator，那麼 stringObject 中的每個字符之間都會被分割。（替代方法，使用正則表達式切割，str.split(/\s+/)，其中\s表示空格，+表示1個或多個）
<script>
var str = "abc abbc cde cdefg";//聲明一個字符串
console.log(str.split("b"));//以字符串b作爲切割
//希望以1個b，或者多個b，作爲切割，使用正則表達式
console.log(str.split(/b+/));
console.log(str.split(""));//把空字符串作爲切割，會把每一個字符都切割，包括空格
console.log(str.split(/\s+/));//使用正則表達式，以空格作爲切割
console.log(str.split(/\s+/,3));//使用參數限制返回的數量
</script>
3、 正則表達式的應用
案例練習：驗證手機號
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>王迪-運用正則表達式驗證手機號</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//先聲明一個函數，用來檢驗用戶輸入的手機號碼是否符合要求
function checkMobile(){
//使用jQuery選擇器，獲取輸入框裏用戶輸入的值，並存儲在變量moblie裏
var moblie = $("#mobile").val()
//使用jQuery選擇器，獲取span元素，並存儲在變量$mobileId裏
var $mobileId = $("#mobile_prompt");
//聲明一個手機號的正則表達式，這裏希望第一位數字是1，第二位數字是34578中的任意一個，後面的數字是0-9都可以，還需要9個。注意：這裏聲明的正則表達式，是作爲案例演示，實際開發中可能會更復雜的正則表達式
var regMoblie = /^1[34578]\d{9}/;
if(regMoblie.test(moblie) == false){
$mobileId.html("手機號碼不正確，請重新輸入");
return false;
}
$mobileId.html("");
return true;
}
</script>
</head>
<body>
<form name="myform" method="get" action="#">
手機號：<input type="text" id="mobile" onblur="checkMobile()" /><span id="mobile_prompt"></span>
</form>
</body>
</html>
注意：在實際的開發中經常遇到電子郵箱地址、用戶名、密碼、日期、各種號碼等的判斷，但是關於這些內容的正則表達式可以在網上查閱資料，一般不用自己書寫。
4、 表單選擇器
在前面的表單驗證效果中，jQuery 起的一個主要作用就是使用選擇器獲取元素，所用的選擇器主要是 ID 選擇器，但是在一些複雜的表單中，有時候需要獲取多個表單元素，事實上 jQuery 提供了專門針對表單的一類選擇器，這就是表單選擇器。
4.1 表單選擇器簡介
顧名思義，表單選擇器就是用來選擇文本輸入框、按鈕等表單元素。
表：標案選擇器
|
語法 |
描述 |
示例 |
|
:input |
匹配所有input、textarea、select和button 元素 |
$("#myform :input")選取表單中所有的input、select和button元素 |
|
:text |
匹配所有單行文本框 |
$("#myform :text")選取email 和姓名兩個input 元素 |
|
:password |
匹配所有密碼框 |
$("#myform :password" )選取所有 <input type="password" />元素 |
|
:radio |
匹配所有單項按鈕 |
$("#myform :radio")選取<input type="radio" />元素 |
|
:checkbox |
匹配所有複選框 |
$(" #myform :checkbox " )選取 <input type="checkbox " />元素 |
|
:submit |
匹配所有提交按鈕 |
$("#myform :submit " )選取 <input type="submit " />元素 |
|
:image |
匹配所有圖像域 |
$("#myform :image" )選取 <input type=" image" />元素 |
|
:reset |
匹配所有重置按鈕 |
$(" #myform :reset " )選取 <input type=" reset " />元素 |
|
:button |
匹配所有按鈕 |
$("#myform :button" )選取button 元素 |
|
:file |
匹配所有文件域 |
$(" #myform :file" )選取 <input type=" file " />元素 |
|
:hidden |
匹配所有不可見元素，或者type 爲hidden的元素 |
$("#myform :hidden" )選取<input type="hidden " />、style="display: none"等元素 |
注意：雖然 jQuery 考慮了瀏覽器兼容性問題，但是由於瀏覽器版本衆多，也不能做到百分之百的兼容，另外，不同版本的 jQuery 庫兼容程度也不太一致。上述“:hidden”選擇器在 Firefox 瀏覽器下，不包括 option 元素。
除了基本的表單選擇器，jQueiy 中還提供了針對表單元素的屬性過濾器，按照表單元素的屬性獲取特定屬性的表單元素。
| 語法 | 描述 | 示例 |
|---|---|---|
|
:enabled |
匹配所有可用元素 |
$("#userform:enabled")匹配 form 內部除 編號輸入框外的所有元素 |
|
:disabled |
匹配所有不可用元素 |
$("#userform:disabled")匹配編號輸入框 |
|
:checked |
匹配所有被選中元素（複選框、單項按鈕、select中的option) |
$(n#userform:checkedn)匹配“性別”中的 “男”選項和“愛好”中的“編程”選項 |
|
:selected |
匹配所有選中的 option 元素 |
$("#userform:selected")匹配“家鄉”中的 “北京”選項 |
=======這裏是結束分割線========