<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單校驗</title>
<style>
.error{
color: red;
}
</style>
<script>
/*
1、給表單綁定onsubmit事件。監聽器中判斷每一個方法校驗的結果。
如果都爲true，則監聽器方法返回true
如果有一個爲false，則監聽器方法返回false
2、定義一些方法，分別校驗各個表單項
3、給各個表單項綁定onblur事件
*/
window.onload = function () {
//1、給表單綁定onsubmit事件
document.getElementById("form").onsubmit = function () {
//調用用戶校檢方法 checkUsername();
//調用密碼校檢方法 checkPassword();
//return checkUsername() && checkPassword();
return checkUsername() && checkPassword();
}
//給用戶名和密碼分別綁定離焦事件
//方法對象！！！不加括號！！！
document.getElementById("username").onblur = checkUsername;
document.getElementById("password").onblur = checkPassword;
}
//校檢用戶名
function checkUsername(){
//1、獲取用戶名的值
var username = document.getElementById("username").value;
//2、定義正則表達式
var reg_username = /^\w{6,12}$/
//3、判斷值是否符合表單正則的規則
var flag = reg_username.test(username);
//4、提示信息
var s_username = document.getElementById("s_username");
if (flag){
//提示綠色對勾
s_username.innerHTML = "<img width= '35' height='25' src='../img/gou.png'/>"
}
else {
//提示紅色用戶名有誤
s_username.innerHTML = "用戶名格式有誤";
}
return flag;
}
//校檢密碼
function checkPassword(){
//1、獲取用戶名的值
var password = document.getElementById("password").value;
//2、定義正則表達式
var reg_password = /^\w{6,12}$/
//3、判斷值是否符合表單正則的規則
var flag = reg_password.test(password);
//4、提示信息
var s_password = document.getElementById("s_password");
if (flag){
//提示綠色對勾
s_password.innerHTML = "<img width= '35' height='25' src='../img/gou.png'/>"
}
else {
//提示紅色用戶名有誤
s_password.innerHTML = "密碼格式有誤";
}
return flag;
}
</script>
</head>
<body>
<form id="form">
<table align="center" >
<tr>
<td>用戶名</td>
<td>
<input type="text" id="username" name="username" >
<span id="s_username" class="error"></span>
</td>
</tr>
<tr>
<td>密碼</td>
<td>
<input type="password" id="password" name="password" >
<span id="s_password" class="error"></span>
</td>
</tr>
<tr>
<td>郵件</td>
<td><input type="text" id="email" name="email" ></td>
</tr>
<tr>
<td>手機號</td>
<td><input type="text" id="phone" name="phone" ></td>
</tr>
<tr>
<td>性別</td>
<td>
<input type="radio" name="gender" value="male" >男
<input type="radio" name="gender" value="female">女
</td>
</tr>
<tr>
<td>出生日期</td>
<td><input type="date" id="birthday" name="birthday" ></td>
</tr>
<tr>
<td colspan="2"><input type="submit" id="register" name="register" value="註冊" ></td>
</tr>
</table>
</form>
</body>
</html>
JavaScript之表單校驗
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
Mac 安裝 Node Error: Could not symlink include/node/common.gypi
根據提示，賦權限，刪除文件等 jimmy@MacBook-Pro ~ % brew link node Linking /usr/local/Cellar/node/20.0.0... Er
Python: two dimensional array
# 假設puzzle是一個包含多個字符串的列表，每個字符串都是同一長度的，代表字母網格的一行 puzzle = [ "JGJGDDAOYD", "IDGFHSPOSA", "FGDIOSAFSC