優雅的表單校驗

優雅的表單校驗：打造用戶友好且高效的前端交互體驗

**引言**

在Web應用開發中，表單是用戶與系統進行信息交互的核心載體。如何實現優雅且高效的表單校驗，既能確保數據的有效性和安全性，又能提升用戶體驗，成為每個前端開發者必須掌握的重要技能。本文將深入探討表單校驗的設計原則、實戰技巧以及現代JavaScript庫如React中的最佳實踐，并通過實例代碼演示如何實現這一目標。

## **一、表單校驗的重要性及設計原則**

### **1. 表單校驗的重要性**

- 數據完整性：防止因用戶輸入錯誤導致的數據丟失或損壞。

- 系統安全：對敏感信息進行驗證，防止惡意攻擊和注入。

- 用戶體驗：及時反饋，降低用戶出錯概率，提升操作流暢度。

### **2. 設計原則**

- **實時反饋**：提供實時校驗，減少提交后才顯示錯誤的滯后感。

- **清晰提示**：錯誤信息應簡潔明了，指明具體問題并給出解決建議。

- **容錯處理**：對于可選但格式嚴格的內容，允許用戶暫時跳過或選擇臨時保存。

- **漸進增強**：針對不同瀏覽器和設備，提供兼容性強且一致的校驗體驗。

## **二、HTML5原生表單校驗**

### **3. HTML5內置校驗屬性**

```html

<form>

</form>

```

### **4. 自定義錯誤提示**

```javascript

document.querySelector('form').addEventListener('invalid', function(event) {

event.preventDefault(); // 阻止默認錯誤提示

const input = event.target;

input.setCustomValidity(''); // 清除默認錯誤信息

if (!input.validity.valid) { // 檢查有效性

input.setCustomValidity('您輸入的信息不符合要求，請檢查后重新輸入');

}

});

```

## **三、JavaScript深度定制表單校驗**

### **5. JavaScript自定義校驗函數**

```javascript

function validateForm(form) {

const emailInput = form.email;

const passwordInput = form.password;

if (!/^\S+@\S+\.\S+$/.test(emailInput.value)) {

emailInput.setCustomValidity('郵箱格式不正確');

} else {

emailInput.setCustomValidity('');

}

if (passwordInput.value.length < 6 || passwordInput.value.length > 20) {

passwordInput.setCustomValidity('密碼長度需在6到20個字符之間');

} else {

passwordInput.setCustomValidity('');

}

// 綁定表單提交事件

document.querySelector('form').addEventListener('submit', function(event) {

event.preventDefault();

validateForm(this);

if (this.checkValidity()) { // 執行自定義校驗并通過時，再調用checkValidity確認所有原生校驗也通過

// 提交表單邏輯...

}

});

```

## **四、React中的表單校驗**

### **6. React Hooks結合Formik實現表單校驗**

首先安裝`formik`庫：

```bash

npm installformik@latest --save

```

然后使用Formik創建一個具有校驗功能的React表單組件：

```jsx

import React from 'react';

import { Formik, Form, Field, ErrorMessage } from 'formik';

const initialValues = { email: '', password: '' };

const validationSchema = Yup.object().shape({

email: Yup.string().email('無效的郵箱地址').required('郵箱為必填項'),

password: Yup.string().min(6, '密碼至少6位').max(20, '密碼不能超過20位').required('密碼為必填項'),

});

const MyForm = () => (

<Formik

initialValues={initialValues}

validationSchema={validationSchema}

onSubmit={(values, { setSubmitting }) => {

setTimeout(() => {

alert(JSON.stringify(values, null, 2));

setSubmitting(false);

}, 400);

}}

{({ isSubmitting }) => (

<Form>

<div>

</div>

<div>

</div>

{isSubmitting ? '提交中...' : '提交'}

</button>

</Form>

)}

</Formik>

);

export default MyForm;

```

## **五、總結與展望**

優雅的表單校驗不僅在于技術實現，更在于設計理念。從基礎的HTML5特性到高級的JavaScript定制，再到現代框架如React提供的解決方案，我們始終要關注用戶體驗，讓表單校驗成為增強用戶信任、簡化交互流程的關鍵環節。隨著Web生態的發展，新的表單處理庫和模式不斷涌現，持續跟進學習和實踐才能把握未來趨勢，創造出更加出色的表單交互體驗。

單屬性匯總：

1 name屬性

服務器會識別不同的name屬性，并根據name屬性來捕獲不同元素內的數據。

2 value屬性

value 屬性為 input 元素設定值。

對于不同的輸入類型，value 屬性的用法也不同：

type="button", "reset", "submit" - 定義按鈕上的顯示的文本

type="text", "password", "hidden" - 定義輸入字段的初始值

type="checkbox", "radio", "image" - 定義與輸入相關聯的值

注釋：<input type="checkbox"> 和 <input type="radio"> 中必須設置 value 屬性。

注釋：value 屬性無法與 <input type="file"> 一同使用。

注意：單選框和復選框傳遞數據到數據庫時一定要設置value, 否則插入數據失敗;

3 type屬性

它決定了<input>標簽在頁面中的表現樣式和功能

text 文本框

password 密碼框

radio 單選框

checkbox 復選框

file 文件域

hidden 隱藏域

image 圖像域

submit 提交按鈕

reset 重置按鈕

button 普通按鈕

4 size屬性

列表框中size屬性用來設置列表框顯示的行數；

文本框和密碼框會使用size屬性設置域的顯示寬度；

5 disabled屬性

定義disabled屬性可以禁止使用該元素；

無法將數據提交到服務器處理;

6 readonly屬性

常用在輸入性表單對象中(如文本框、密碼框、文本區域)，用來禁止輸入任何信息；

可以將數據提交到服務器處理;

7 checked屬性

它與disabled屬性一樣沒有屬性值，常用在選擇性表單對象中，定義對象處于被選中狀態(如單選按鈕和復選框)

但在列表框或者下拉式菜單中，為了表示被選中的項目，可使用selected屬性；

7 placeholder屬性

規定幫助用戶填寫輸入字段的提示。

表單對象：

1 文本框

<input type="text" name="textfield" id="textfield" value="單行文本框" size="20" maxlength="20">

必需的屬性:name type

2 密碼域

<input type="password" name="passwordfield" id="passwordfield">

必需的屬性:name type

3 文本域

<textarea name="textarea" cols="20" rows="5" wrap="physical"></textarea>

必需的屬性:name cols rows

wrap屬性默認值：輸入的文本會自動換行。當數據提交到服務器被處理時, 換行符不會隨輸入的文本一同被提交到服務器；

off(也可寫成wrap)：不自動換行, 當輸入的內容超出文本區域右邊界時, 文本將向左滾動, 并顯示滾動條。

如果希望換行，必須手動輸入回車鍵才能將插入點移到下一行；

virtual：文本能夠自動換行, 當數據提交到服務器被處理時, 換行符不會隨輸入文本一同提交到服務器；(默認值)

physical：文本能夠自動換行, 當數據提交到服務器被處理時, 換行符將會隨輸入的文本一同被提交到服務器進行處理；

關于如何限制文本域輸入字符串的長度見javascript|語法|設置文本框

HTML5中wrap中屬性值修改為hard|soft

soft 當在表單中提交時, textarea 中的文本不換行, 默認值。

hard 當在表單中提交時, textarea 中的文本換行(包含換行符)。

當使用 "hard" 時, 必須規定 cols 屬性

4 單選按鈕

單選按鈕傳遞的信息簡單，如1或0、True或False。

<input type="radio" name="radio" value="1"/>選項1
<input type="radio" name="radio" value="2"/>選項2
<input type="radio" name="radio" value="3"/>選項3

多個單選按鈕通過定義相同的name屬性, 以實現捆綁在一起；

必需的屬性:type name value

5 復選框

<input type="checkbox" name="checkbox[]" value="1"/>選項2
<input type="checkbox" name="checkbox[]" value="2"/>選項2
<input type="checkbox" name="checkbox[]" value="3"/>選項2

通過設置相同的name屬性可以把多個復選框捆綁在一起；

必需的屬性:type name value

6 列表框/下拉菜單

<select name="select" size=1>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>

如果select元素中不設置size屬性,則該元素會顯示為下拉菜單樣式

<select name="select" size="1" multiple="multiple">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>

如果希望以列表框形式顯示,則可以使用size屬性指定列表框的高度(顯示幾個選項);

還可以通過mutiple屬性定義列表框是否為多選(默認是單選)；

通過<optgroup>標簽把相關的選項組合在一起：

<select>
<optgroup label="PHP版塊">
<option value ="resource">資源共享</option>
<option value ="study">學習交流</option>
<option value ="salary">薪酬待遇</option>
</optgroup>
<optgroup label="IOS版塊">
<option value ="resource">資源共享</option>
<option value ="study">學習交流</option>
<option value ="salary">薪酬待遇</option>
</optgroup>
</select>

注意：其中PHP版塊和IOS版塊不能被選中

所有主流瀏覽器都支持 <optgroup> 標簽。

7 文件域

<input type="file" name="file"/>
<input type="file" name="file" multiple/>

8 按鈕

提交按鈕

<input type="submit" name="" value="提交"/>

name值必須給出

重置按鈕

<input type="reset" name="" value="重置"/>

普通按鈕

<input type="button" name="" value="普通按鈕"/>

它一般是配合javascript來使用;

關于控制表單提交按鈕見: javascript|語法|控制表單提交

9 圖像域

<input type="image" name="image" value="提交" src="images/vote_d.gif" alt="提交" align="middle"/>

10 隱藏域

限制上傳文件大小

<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />

傳遞ID值

<input type="hidden" name="id" value="<?php echo $result['id'];?>" />

11 button標簽

在 button 元素內部，您可以放置內容，比如文本或圖像。這是該元素與使用 input 元素創建的按鈕之間的不同之處。

<button type="button" name="button" value="按鈕"><img src="hw001.jpeg"/></button>

普通按鈕<button type="button">普通按鈕</button> 它一般是配合javascript來使用, 默認值

提交按鈕<button type="submit">提交按鈕</button>

重置按鈕<button type="reset">重置按鈕</button>

提交表單

enctype屬性

該屬性包含兩種方式:

application/x-www-form-urlencoded 是默認編碼類型

multipart/form-data

multipart/form-data編碼方式可以用來傳輸二進制數據或者非ASCII字符的文本(如圖片、不同格式的文件等),上傳文件必須使用此屬性

multipart: 多部件的

multiple: 多重的

text/plain

text/plain將表單屬性發送到電子郵箱時，enctype的值必須設為"text/plain",否則將會出現亂碼。

發送電子郵件的表單程序

<form name="form1" method="post" action="mailto:marker@broadview.com.cn" enctype="text/plain">
</form>

action 表單提交的腳本

如果傳遞到本頁面，則直接輸入控制 action=""

表單提交方式method:post/get

<form action="test.php?id=5" method="post" >
name: <input type="text" name="name" value="100">
</form>

id=5是get傳， name="100" 是post傳！ //高洛峰解釋

action="" 表示傳遞到當前腳本文件

target 指定提交到哪一個窗口

_blank 打開新窗口

_self 當前的窗口,默認值

_parent 上一層窗口

_top 最上層窗口

框架名稱指定指定窗口或框架名稱

label標簽

作用: 擴大觸控區域, 為了提升用戶體驗, 點擊文字也能選中表單

<form action=" method="get" accept-charset="utf-8">
<label>電子郵箱: <input type="text" name="email" value="" placeholder="請輸入電子郵箱"/></label><br/>
<label>密碼: <input type="password" name="password"/></label><br/>
<label for="address">地址</label>
<input type="text" name="address" id="address" placeholder="請輸入地址" />
</form>

for與id一致

<input type="radio" id="sec" name="sex"> <label for="sex">男</label>

簡化寫法:

<label><input type="checkbox"/>周杰倫-晴天</label>

注意: "for" 屬性可把 label 綁定到另外一個元素。請把"for"屬性的值設置為相關元素的 id 屬性的值。

PHP實例：創建發送郵件信息的html表單

代碼：

<html>
<head>
<title>簡單郵件發送表單</title>
</head>
<body>
<h1>Mail Form</h1>
<form name="form1" method="post" action="simpleEmail.php">
<table>
<tr><td><b>To</b></td><td><input type="text" name="mailto" size="35"></td></tr>
<tr><td><b>郵件主題：</b></td>
<td><input type="text" name="mailsubject" size="35"></td></tr>
<tr><td><b>郵件內容</b></td>
<td><textarea name="mailbody" cols="50" rows="7"></textarea></td>
</tr>
<tr><td colspan="2">
<input type="submit" name="Submit" value="發送">
</td>
</tr>
</table>
</form>
</body>
</html>

simpleEmail.php

.form 標簽

1）作用

<form></form>定義表單的開始位置和結束位置，表單提交時的內容就是<form>表單中的內容

2）基本格式

<form action="服務器端地址（接受表單內容的地址）" name="表單名稱" method="post|get">...</form>

3）常用屬性

1.name

表單名稱

2.method

傳送數據的方式，分為post和get兩種方式：

get方式：get方式提交時，會將表單的內容附加在URL地址的后面，所以限制了提交的內容的長度，不超過8192個字符，且不具備保密性。
post方式：post方式提交時，將表單中的數據一并包含在表單主體中，一起傳送到服務器中處理，沒有數據大小限制。

3.action

表單數據的處理程序的URL地址，如果為空則使用當前文檔的URL地址，如果表單中不需要使用action屬性也要指定其屬性為”no“。

4.enctype

設置表單的資料的編碼方式。屬性值：

application/x-www-form-urlencoded：在發送前編碼所有字符（默認）
multipart/form-data：不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值。
text/plain：空格轉換為 "+" 加號，但不對特殊字符編碼。

5.target

和超鏈接的屬于類似，用來指定目標窗口。

2.input 標簽

1）注意

input 標記沒有結束標記。

2）基本語法

<input type="" name="" value="" size="" maxlength="">

3）屬性

1.type屬性

text：文本輸入域
password：密碼輸入域
submit：提交按鈕
reset：重置按鈕
button：普通按鈕
radio：單選按鈕，可以使用”checked“屬性來設置默認選中項
checkbox：復選框，可以使用”checked“屬性來設置默認選中項
hidden：隱藏表單域
file：文件域

2.name屬性

定義控件的名稱

3.value屬性

初始化值，打開瀏覽器時，文本框中的內容

4.size屬性

設置控件的長度

5.maxlength屬性

輸入框中最大允許輸入的字符數

3.textarea 標簽

1）作用

使用 textarea 標記可以實現一個能夠輸入多行文本的區域。

2）語法格式

rows屬性和cols屬性分別用來指定，顯示的行數和列數，單位是字符個數；value指定傳送到服務器上面的值。

<textarea name="name" rows="value" cols="value" value="value">... ... </textarea>

4.select 標簽

1）作用

菜單下拉列表域，生成一個下拉列表。

2）option 標簽

作用：

option 標記用來指定列表中的一個選項，需要放在 select 之間。

值：

value：給選項賦值，指定傳送到服務器上面的值。
selected：指定默認的選項。

3）語法格式

<select name="" size="value" multiple>    <option value="value1" selected>選項1</option>    <option value="value2">選項2</option>    <option value="value3">選項3</option>    ... ... ...</select>

4)屬性

multiple屬性：multiple屬性不用賦值，其作用是，表示用可以多選的下來列表，如果沒有這個屬性就只能單選。
size屬性：設置列表的高度。
name屬性：定義這個列表的名稱。

5.label 標簽

1）作用

用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點

2）語法

<label for="male">Male</label><input type="radio" name="sex" id="male">

6.舉例

<form name="form" method="post" action="no" enctype="multipart/form-data">  <label for="male">賬號：</label><input type="text" name="username" value="admin"  id="male"><br>  密碼：<input type="password" name="password" size="50" maxlength="6"><br>  性別：<input type="radio" name="sex" value="男"> 男    <input type="radio" name="sex" value="女" checked="checked"> 女<br>  興趣：<input type="checkbox" name="interest" value="籃球">籃球    <input type="checkbox" name="interest" value="足球" checked="checked">足球    <input type="checkbox" name="interest" value="羽毛球" checked="checked">羽毛球    <input type="hidden" name="hidden"><br>  頭像：<input type="file" name="file"><br>  簡介：    <textarea rows="10" cols="30">        </textarea><br>  城市：    <select name="city" multiple>      <option value="beijing">北京</option>      <option value="shanghai" selected>上海</option>      <option value="nanjing">南京</option>      <option value="guangdong">廣東</option>    </select>  <br>  <input type="submit" value="注冊">  <input type="reset">  <input type="button" value="普通按鈕"></form>

在線咨詢

上一篇：HTML編輯器復制WORD里面帶圖文的文章，圖片可以直接顯示
下一篇：HTML教程（看完這篇就夠了）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

優雅的表單校驗

.form 標簽

1）作用

2）基本格式

3）常用屬性

1.name

2.method

3.action

4.enctype

5.target

2.input 標簽

1）注意

2）基本語法

3）屬性

1.type屬性

2.name屬性

3.value屬性

4.size屬性

5.maxlength屬性

3.textarea 標簽

1）作用

2）語法格式

4.select 標簽

1）作用

2）option 標簽

3）語法格式

4)屬性

5.label 標簽

1）作用

2）語法

6.舉例

您的項目需求