目錄
一，表單正則驗證校驗任務訓練
1，任務概述
2，任務過程
3，可能遇到的問題
4，參考代碼
4.1 運作結果
4.2 程式設計思路
4.3 參考代碼
一，表單正則驗證校驗任務訓練
1，任務概述
程式猿小明需要為公司員工的個人資訊錄入編寫前端代碼,效果如下圖
需求:要保證資訊錄入格式正确無遺漏(輸入有誤要給到對應提示)
2，任務過程
使用 HTML+CSS 布局出如上圖所示頁面效果
嵌入 JS 代碼，添加表單送出和表單項失去焦點等事件處理
在事件進行中按照表單項後面提示的資訊完成對應表單驗證操作
為代碼添加适量注釋說明，注意代碼排版整潔
3，可能遇到的問題
單選和下拉框無須添加失去焦點事件（因為隻有輸入框需要）
正規表達式的使用
4，參考代碼
4.1 運作結果
4.2 程式設計思路
編寫HTML頁面樣式：form表單（input标簽的text普通文本框，password密碼輸入框，ratio單選。以及select标簽的下拉菜單）；
補充表單填寫規則（通過text标簽設定樣式，并用 空格進行對齊）；
為各個輸入選擇項綁定失去焦點屬性onblur對應的函數，并為form設定onsubmit屬性對應的函數；
利用正規表達式編寫表單驗證規則；
調整頁面為【送出後不重新整理頁面】，這樣點選送出按鈕後，如果有選項填寫錯誤，隻需修改對應内容即可，不必全部重新填寫；
注意：
手機号碼驗證方法：參考@北極光LG【使用正規表達式驗證手機号碼】
- 規定第一位數字輸入的必須是1，第二位數字輸入的必須是3,4,5,7,8其中的一位，後面的隻能輸入0-9的數字，不能輸入字母或其他的字元，輸入的必須是一個十一位數的号碼
4.3 參考代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>個人資訊登記表</h1>
<form action="" method="POST" name="myform" onsubmit="doSubmit()" target="iframe">
登入賬号：<input type="text" name="account" onblur="checkAccount()">
<text style="color:gray;font-size: 14px;"> 6~18位有效數字(字母,數字,下劃線)</text><br><br>
登入密碼：<input type="password" name="password" onblur="checkPassword()">
<text style="color:gray;font-size: 14px;"> 6~18位任意字元</text><br><br>
重複密碼：<input type="password" name="password2" onblur="recheckPassword()">
<text style="color:gray;font-size: 14px;"> 重複密碼與登入密碼一緻</text><br><br>
性 别：<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female" checked>女<br><br>
年 齡：<input type="text" name="age" onblur="checkAge()">
<text style="color:gray;font-size: 14px;"> 大于0的任意兩位整數</text><br><br>
手機号碼：<input type="text" name="phone" onblur="checkPhone()">
<text style="color:gray;font-size: 14px;"> 1開頭的11位整數</text><br><br>
郵 箱：<input type="text" name="email" onblur="checkEmail()">
<text style="color:gray;font-size: 14px;"> 有效的Email位址</text><br><br>
學 曆：<select name="education" onblur="checkEducation()">
<option value="0" selected>請選擇</option>
<option value="1">大專</option>
<option value="2">大學</option>
<option value="3">碩士</option>
<option value="4">博士</option>
</select>
<!-- 如果隻是在HTML中添加多個空格，隻能一個個複制，通過JavaScript可以簡化此步驟 -->
<text style="color:gray;font-size: 14px;"> 必須選擇一個學曆選項</text>
<br><br>
<input type="submit" value="送出">
<input type="reset" value="重置">
</form>
<!-- 避免表單送出後重新整理頁面 -->
<iframe id="iframe" name="iframe" style="display:none;"></iframe>
</body>
<script>
// 檢查賬号
function checkAccount(){
var account = document.myform.account.value;
// \w表示字母、數字、下劃線
if(account.match(/^\w{6,18}$/) == null){
alert("請輸入6~18位字元、數字、下劃線字元");
return false
}
return true;
}
// 檢查密碼
function checkPassword(){
var password = document.myform.password.value;
// .表示任意字元
if(password.match(/^.{6,18}$/) == null){
alert("請輸入6~18位任意字元");
return false;
}
return true;
}
// 檢查密碼是否一緻
function recheckPassword(){
var password = document.myform.password.value;
var password2 = document.myform.password2.value;
if(password != password2){
alert("兩次密碼輸入不一緻！");
return false;
}
return true;
}
// 檢查年齡
function checkAge(){
var age = document.myform.age.value;
if(age.match(/^\d{1,2}$/) == null){
alert("請輸入1~99的整數");
return false;
}
return true;
}
// 檢查電話号碼
function checkPhone(){
var phone = document.myform.phone.value;
// 以1開頭的11位整數
if(phone.match(/^[1][3,4,5,7,8][0-9]{9}$/) == null){
alert("請輸入正确的電話号碼");
return false;
}
return true;
}
// 檢查郵箱
function checkEmail(){
var email = document.myform.email.value;
// 至少有任意字元(字母數字下劃線)+@至少有任意字元(字母數字下劃線)+1~3個.xxx結尾
if(email.match(/^\w+@\w+(\.\w+){1,3}$/) == null) {
alert("請輸入正确的Email位址");
return false;
}
return true;
}
// 檢查學曆是否選擇
function checkEducation(){
var education = document.myform.education.value;
if(education == 0){
alert("請選擇一個學曆選項");
return false;
}
return true;
}
function doSubmit(){
if(checkAccount() && checkPassword() && recheckPassword() && checkAge() && checkPhone() && checkEmail() && checkEducation()){
alert("送出成功！");
return true;
}else{
return false;
}
}
</script>
</html>