優(yōu)雅的表單校驗(yàn)

優(yōu)雅的表單校驗(yàn)：打造用戶友好且高效的前端交互體驗(yàn)

**引言**

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

## **一、表單校驗(yàn)的重要性及設(shè)計(jì)原則**

### **1. 表單校驗(yàn)的重要性**

- 數(shù)據(jù)完整性：防止因用戶輸入錯(cuò)誤導(dǎo)致的數(shù)據(jù)丟失或損壞。

- 系統(tǒng)安全：對敏感信息進(jìn)行驗(yàn)證，防止惡意攻擊和注入。

- 用戶體驗(yàn)：及時(shí)反饋，降低用戶出錯(cuò)概率，提升操作流暢度。

### **2. 設(shè)計(jì)原則**

- **實(shí)時(shí)反饋**：提供實(shí)時(shí)校驗(yàn)，減少提交后才顯示錯(cuò)誤的滯后感。

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

- **容錯(cuò)處理**：對于可選但格式嚴(yán)格的內(nèi)容，允許用戶暫時(shí)跳過或選擇臨時(shí)保存。

- **漸進(jìn)增強(qiáng)**：針對不同瀏覽器和設(shè)備，提供兼容性強(qiáng)且一致的校驗(yàn)體驗(yàn)。

## **二、HTML5原生表單校驗(yàn)**

### **3. HTML5內(nèi)置校驗(yàn)屬性**

```html

<form>

</form>

```

### **4. 自定義錯(cuò)誤提示**

```javascript

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

event.preventDefault(); // 阻止默認(rèn)錯(cuò)誤提示

const input = event.target;

input.setCustomValidity(''); // 清除默認(rèn)錯(cuò)誤信息

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

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

}

});

```

## **三、JavaScript深度定制表單校驗(yàn)**

### **5. JavaScript自定義校驗(yàn)函數(shù)**

```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個(gè)字符之間');

} else {

passwordInput.setCustomValidity('');

}

// 綁定表單提交事件

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

event.preventDefault();

validateForm(this);

if (this.checkValidity()) { // 執(zhí)行自定義校驗(yàn)并通過時(shí)，再調(diào)用checkValidity確認(rèn)所有原生校驗(yàn)也通過

// 提交表單邏輯...

}

});

```

## **四、React中的表單校驗(yàn)**

### **6. React Hooks結(jié)合Formik實(shí)現(xiàn)表單校驗(yàn)**

首先安裝`formik`庫：

```bash

npm installformik@latest --save

```

然后使用Formik創(chuàng)建一個(gè)具有校驗(yàn)功能的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('郵箱為必填項(xiàng)'),

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

});

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;

```

## **五、總結(jié)與展望**

優(yōu)雅的表單校驗(yàn)不僅在于技術(shù)實(shí)現(xiàn)，更在于設(shè)計(jì)理念。從基礎(chǔ)的HTML5特性到高級的JavaScript定制，再到現(xiàn)代框架如React提供的解決方案，我們始終要關(guān)注用戶體驗(yàn)，讓表單校驗(yàn)成為增強(qiáng)用戶信任、簡化交互流程的關(guān)鍵環(huán)節(jié)。隨著Web生態(tài)的發(fā)展，新的表單處理庫和模式不斷涌現(xiàn)，持續(xù)跟進(jìn)學(xué)習(xí)和實(shí)踐才能把握未來趨勢，創(chuàng)造出更加出色的表單交互體驗(yàn)。

單屬性匯總：

1 name屬性

服務(wù)器會識別不同的name屬性，并根據(jù)name屬性來捕獲不同元素內(nèi)的數(shù)據(jù)。

2 value屬性

value 屬性為 input 元素設(shè)定值。

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

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

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

type="checkbox", "radio", "image" - 定義與輸入相關(guān)聯(lián)的值

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

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

注意：單選框和復(fù)選框傳遞數(shù)據(jù)到數(shù)據(jù)庫時(shí)一定要設(shè)置value, 否則插入數(shù)據(jù)失敗;

3 type屬性

它決定了<input>標(biāo)簽在頁面中的表現(xiàn)樣式和功能

text 文本框

password 密碼框

radio 單選框

checkbox 復(fù)選框

file 文件域

hidden 隱藏域

image 圖像域

submit 提交按鈕

reset 重置按鈕

button 普通按鈕

4 size屬性

列表框中size屬性用來設(shè)置列表框顯示的行數(shù)；

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

5 disabled屬性

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

無法將數(shù)據(jù)提交到服務(wù)器處理;

6 readonly屬性

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

可以將數(shù)據(jù)提交到服務(wù)器處理;

7 checked屬性

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

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

7 placeholder屬性

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

表單對象：

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屬性默認(rèn)值：輸入的文本會自動換行。當(dāng)數(shù)據(jù)提交到服務(wù)器被處理時(shí), 換行符不會隨輸入的文本一同被提交到服務(wù)器；

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

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

virtual：文本能夠自動換行, 當(dāng)數(shù)據(jù)提交到服務(wù)器被處理時(shí), 換行符不會隨輸入文本一同提交到服務(wù)器；(默認(rèn)值)

physical：文本能夠自動換行, 當(dāng)數(shù)據(jù)提交到服務(wù)器被處理時(shí), 換行符將會隨輸入的文本一同被提交到服務(wù)器進(jìn)行處理；

關(guān)于如何限制文本域輸入字符串的長度見javascript|語法|設(shè)置文本框

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

soft 當(dāng)在表單中提交時(shí), textarea 中的文本不換行, 默認(rèn)值。

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

當(dāng)使用 "hard" 時(shí), 必須規(guī)定 cols 屬性

4 單選按鈕

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

<input type="radio" name="radio" value="1"/>選項(xiàng)1
<input type="radio" name="radio" value="2"/>選項(xiàng)2
<input type="radio" name="radio" value="3"/>選項(xiàng)3

多個(gè)單選按鈕通過定義相同的name屬性, 以實(shí)現(xiàn)捆綁在一起；

必需的屬性:type name value

5 復(fù)選框

<input type="checkbox" name="checkbox[]" value="1"/>選項(xiàng)2
<input type="checkbox" name="checkbox[]" value="2"/>選項(xiàng)2
<input type="checkbox" name="checkbox[]" value="3"/>選項(xiàng)2

通過設(shè)置相同的name屬性可以把多個(gè)復(fù)選框捆綁在一起；

必需的屬性: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元素中不設(shè)置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屬性指定列表框的高度(顯示幾個(gè)選項(xiàng));

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

通過<optgroup>標(biāo)簽把相關(guān)的選項(xiàng)組合在一起：

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

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

所有主流瀏覽器都支持 <optgroup> 標(biāo)簽。

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來使用;

關(guān)于控制表單提交按鈕見: 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標(biāo)簽

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

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

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

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

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

提交表單

enctype屬性

該屬性包含兩種方式:

application/x-www-form-urlencoded 是默認(rèn)編碼類型

multipart/form-data

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

multipart: 多部件的

multiple: 多重的

text/plain

text/plain將表單屬性發(fā)送到電子郵箱時(shí)，enctype的值必須設(shè)為"text/plain",否則將會出現(xiàn)亂碼。

發(fā)送電子郵件的表單程序

<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="" 表示傳遞到當(dāng)前腳本文件

target 指定提交到哪一個(gè)窗口

_blank 打開新窗口

_self 當(dāng)前的窗口,默認(rèn)值

_parent 上一層窗口

_top 最上層窗口

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

label標(biāo)簽

作用: 擴(kuò)大觸控區(qū)域, 為了提升用戶體驗(yàn), 點(diǎn)擊文字也能選中表單

<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 綁定到另外一個(gè)元素。請把"for"屬性的值設(shè)置為相關(guān)元素的 id 屬性的值。

PHP實(shí)例：創(chuàng)建發(fā)送郵件信息的html表單

代碼：

<html>
<head>
<title>簡單郵件發(fā)送表單</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>郵件內(nèi)容</b></td>
<td><textarea name="mailbody" cols="50" rows="7"></textarea></td>
</tr>
<tr><td colspan="2">
<input type="submit" name="Submit" value="發(fā)送">
</td>
</tr>
</table>
</form>
</body>
</html>

simpleEmail.php

.form 標(biāo)簽

1）作用

<form></form>定義表單的開始位置和結(jié)束位置，表單提交時(shí)的內(nèi)容就是<form>表單中的內(nèi)容

2）基本格式

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

3）常用屬性

1.name

表單名稱

2.method

傳送數(shù)據(jù)的方式，分為post和get兩種方式：

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

3.action

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

4.enctype

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

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

5.target

和超鏈接的屬于類似，用來指定目標(biāo)窗口。

2.input 標(biāo)簽

1）注意

input 標(biāo)記沒有結(jié)束標(biāo)記。

2）基本語法

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

3）屬性

1.type屬性

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

2.name屬性

定義控件的名稱

3.value屬性

初始化值，打開瀏覽器時(shí)，文本框中的內(nèi)容

4.size屬性

設(shè)置控件的長度

5.maxlength屬性

輸入框中最大允許輸入的字符數(shù)

3.textarea 標(biāo)簽

1）作用

使用 textarea 標(biāo)記可以實(shí)現(xiàn)一個(gè)能夠輸入多行文本的區(qū)域。

2）語法格式

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

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

4.select 標(biāo)簽

1）作用

菜單下拉列表域，生成一個(gè)下拉列表。

2）option 標(biāo)簽

作用：

option 標(biāo)記用來指定列表中的一個(gè)選項(xiàng)，需要放在 select 之間。

值：

value：給選項(xiàng)賦值，指定傳送到服務(wù)器上面的值。
selected：指定默認(rèn)的選項(xiàng)。

3）語法格式

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

4)屬性

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

5.label 標(biāo)簽

1）作用

用于綁定一個(gè)表單元素, 當(dāng)點(diǎn)擊label標(biāo)簽的時(shí)候, 被綁定的表單元素就會獲得輸入焦點(diǎn)

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編輯器復(fù)制WORD里面帶圖文的文章，圖片可以直接顯示
下一篇：HTML教程（看完這篇就夠了）

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

優(yōu)雅的表單校驗(yàn)

.form 標(biāo)簽

1）作用

2）基本格式

3）常用屬性

1.name

2.method

3.action

4.enctype

5.target

2.input 標(biāo)簽

1）注意

2）基本語法

3）屬性

1.type屬性

2.name屬性

3.value屬性

4.size屬性

5.maxlength屬性

3.textarea 標(biāo)簽

1）作用

2）語法格式

4.select 標(biāo)簽

1）作用

2）option 標(biāo)簽

3）語法格式

4)屬性

5.label 標(biāo)簽

1）作用

2）語法

6.舉例

您的項(xiàng)目需求