@Author：Runsen
@Date：2020/5/30
作者介紹：Runsen目前大三下學期，專業化學工程與工藝，大學沉迷日語，Python， Java和一系列數據分析軟件。導致翹課嚴重，專業排名中下。.在大學60%的時間，都在CSDN。決定今天比昨天要更加努力。
我要反覆查漏補缺，將2018年的東西撿回來，形成高效學習。
今天，我要寫的是JavaScript表單中的驗證API，寫之前，先去W3C教程看看，偷窺學習一下JavaScript表單中的驗證API。
表單標籤
在HTML中，表單是由<form>元素來表示的，<input>就是用戶輸入的標籤。其實在有一些<input>輸入類型本身就擁有一些內在的約束。將 type 設置爲 “email”, “number” 或者 “URL” 的話，就會自動檢查輸入的值是否是有效的電子郵件地址、數字或者 URL， 例如:
<input type="email">
HTML 表單實例
這是來自W3C教程的例子。這裏我不知道document.forms["myForm"]["fname"].value的用法，所以拿過來。
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
// document.forms["myForm"]["fname"].value 都是name
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("必須填寫姓名！");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="/demo/action_page.php" οnsubmit="return validateForm()" method="post">
姓名：<input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
</html>
驗證數字輸入
下面驗證輸入的是不是成績，要求就是成績必須在0-100之間，效果如下gif所示。
失去焦點
所謂焦點,就是鼠標移上文本框的時候那個一閃一閃的光標， 失去焦點用戶就是要輸入。onblur就是失去焦點事件，通過$("score").value獲取輸入的內容。
判斷是不是數值
獲取輸入的內容，就是一個parseFloat判斷是不是數值，然後就是添加class，修改樣式。
封裝函數
由於三次判斷需要處理公共的樣式，那麼就直接寫一個dealStyle函數。當輸入框獲得焦點，也需要一個函數。
代碼
具體代碼如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#prompt{
font-size: 13px;
color: darkgray;
}
#score{
border:1px solid darkgray;
}
.right{
background-size:15px 15px;
padding-left: 20px;
color: lightgreen !important;
}
.error{
background-size:15px 15px;
padding-left: 20px;
color: red !important;
}
</style>
</head>
<body>
<div id="box">
<label>您的成績:</label>
<input id="score" type="text" placeholder="請輸入分數">
<span id="prompt">請輸入您的成績!</span>
</div>
<script>
window.onload = function () {
// 當輸入框失去焦點
$('score').onblur = function () {
// 1. 獲取輸入的內容
var value = parseFloat($("score").value);
// 2.驗證
if(isNaN(value)){ // 不是一個數
/* $('prompt').innerText = "輸入成績不正確";
$('prompt').className = 'error';
$('score').style.borderColor = 'red';*/
dealStyle('輸入成績不正確', 'error', 'red');
}else if(value >= 0 && value <= 100){ // 合法的
/*$('prompt').innerText = "輸入成績正確";
$('prompt').className = 'right';
$('score').style.borderColor = 'lightgreen';*/
dealStyle('輸入成績正確', 'right', 'lightgreen');
}else { // 超出
/*$('prompt').innerText = "成績必須在0-100之間";
$('prompt').className = 'error';
$('score').style.borderColor = 'red';*/
dealStyle('成績必須在0-100之間', 'error', 'red');
}
};
// 當輸入框獲得焦點
$('score').onfocus = function () {
/*$('prompt').innerText = "請輸入您的成績!";
$('prompt').className = '';
$('score').style.borderColor = 'darkgray';*/
$('score').style.outline = 'none';
$('score').value = '';
dealStyle("請輸入您的成績!", '', 'darkgray');
};
/**
* 處理公共的樣式
* @param {string}msg
* @param {string}className
* @param {string}color
*/
function dealStyle(msg, className, color) {
$('prompt').innerText = msg;
$('prompt').className = className;
$('score').style.borderColor = color;
}
};
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
</script>
</body>
</html>
這是你會好奇$('score').，其實這是jQuery 的寫法，由於沒有導入jQuery，所以定義了function $(id) 的函數。
驗證API
還有很多驗證API，比如常見的checkValidity和setCustomValidity
| 屬性 | 描述 |
|---|---|
| checkValidity() | 返回 true，如果 input 元素包含有效數據 |
| setCustomValidity() | 設置 input 元素的 validationMessage 屬性。 |
具體的查看W3C教程，我不想照搬。