javascript
十四、JavaScript表单中的验证API
@Author：Runsen
@Date：2020/5/30
作者介紹：Runsen目前大三下學期，專業化學工程與工藝，大學沉迷日語，Python， Java和一系列數據分析軟件。導致翹課嚴重，專業排名中下。.在大學60%的時間，都在CSDN。決定今天比昨天要更加努力。
我要反復查漏補缺，將2018年的東西撿回來，形成高效學習。
今天，我要寫的是JavaScript表單中的驗證API，寫之前，先去W3C教程看看，偷窺學習一下JavaScript表單中的驗證API。
文章目錄
- 表單標簽
- HTML 表單實例
- 驗證數字輸入
- 失去焦點
- 判斷是不是數值
- 封裝函數
- 代碼
- 驗證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 都是namevar 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教程，我不想照搬。
總結
以上是生活随笔為你收集整理的十四、JavaScript表单中的验证API的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 开小餐饮店需要注意什么 以下几点都是要记
- 下一篇： 十九、前端必学Bootstrap美化（下