JavaScript中的校驗機制三種寫法舉例(如手機號碼、電話號碼校驗)
更新時間：2025年04月23日 09:08:22 作者：outstanding木槿
這篇文章主要給大家介紹了關(guān)于JavaScript中的校驗機制三種寫法舉例,如手機號碼、電話號碼校驗,還提供了針對不同場景和需求的驗證方法推薦,并討論了防抖優(yōu)化在頻繁校驗場景中的應用,需要的朋友可以參考下
在表單驗證場景中，getValueFromEvent、pattern 和 validator 是三種不同的驗證機制
| 方法 | 作用 | 適用場景 |
|---|---|---|
getValueFromEvent | 從表單事件（如 onChange）中提取值，通常用于預處理輸入數(shù)據(jù) | 需要自定義事件值解析（如文件上傳） |
pattern | 通過正則表達式對輸入值進行格式校驗，屬于聲明式規(guī)則 | 簡單格式校驗（如手機號、郵箱） |
validator | 通過函數(shù)實現(xiàn)自定義邏輯驗證，支持異步操作和復雜條件判斷 | 動態(tài)校驗（如密碼強度、聯(lián)動字段） |
解析
第一位是【1】開頭，第二位則是【3,4,5,7,8】，第三位則是【0-9】，第三位之后則是數(shù)字【0-9】。從而我們可以得出一個符合當前的手機號碼驗證正則表達式(不適用電話)。
^1(3|4|5|7|8)\d{9}$ 或者 ^1[34578]\d{9}$ 或 ^1[34578][0-9]{9}$ 或 ^1[3,4,5,7,8][0-9]{9}$
0. ^表示開始
1. 正則里面的中括號[]只能匹配其中一個
2. 如果要匹配特定幾組字符串的話，那就必須使用小括號()加或|
3. |在中括號里面也是一個字符，并不代表或
4. [3457]匹配3或者4或者5或者7，而(3457)把3457這四個數(shù)當成整體匹配，若要跟前面一樣可以加或(3|4|5|7)。
5. [34|57]匹配3或者4或者|或者5或者7，而(34|57)匹配34或者57。
6. \d{9}：匹配9個數(shù)字（0~9任意組合9個數(shù)字）。其中，\d 代表一個數(shù)字字符，{9} 表示前面的模式（即 \d）應重復9次。
總結(jié)
| 方案 | 推薦度 | 適用場景 |
|---|---|---|
rules + pattern | ????? | 簡單正則驗證（推薦） |
rules + validator | ???? | 復雜自定義驗證 |
手動 checkPhone | ? | 遺留代碼或特殊需求 |
最佳實踐：優(yōu)先使用 Ant Design 的 rules 和 pattern，避免手動操作 DOM 和 alert
寫法1：（不推薦）
function checkPhone(){
var phone = document.getElementById('phone').value;
if(!(/^1[34578]\d{9}$/.test(phone))){
alert("手機號碼有誤，請重填");
return false;
}
}
或者
function checkPhone(){
var phone = document.getElementById('phone').value;
var phoneRegex = /^1(3|4|5|7|8)\d{9}$/
if(!(phoneRegex.test(phone))){
alert("手機號碼有誤，請重填");
return false;
}
}
// 在提交表單時調(diào)用
handleSubmit = (e) => {
e.preventDefault();
if (checkPhone()) {
// 驗證通過，提交表單
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('提交數(shù)據(jù):', values);
}
});
}
};
// handleSubmit = () => {
// const phone = document.getElementById('phone').value;
// if (!this.checkPhone(phone)) {
// alert("手機號碼有誤"); // 手動觸發(fā)驗證?
// }
// };
const FormItem = Form.Item
<Row>
<Col>
<FormItem label='聯(lián)系電話'>
{getFieldDecorator('phone', {
rules:[{
required: true,
message: '請輸入正確的聯(lián)系電話！',
}],
initialValue: '',
})(
<Input id='phone' />
)}
</FormItem>
</Col>
<Button onClick={this.handleSubmit}>提交</Button>
</Row>?? 缺點：
- 直接操作 DOM（
document.getElementById），不符合 React 的最佳實踐。 - 錯誤提示用
alert，用戶體驗較差（Ant Design 的表單錯誤提示更優(yōu)雅）。
寫法2：pattern 正則表達式
const FormItem = Form.Item
<Row>
<Col>
<FormItem label='聯(lián)系電話'>
{getFieldDecorator('phone', {
rules:[
{
required: true,
message: '請輸入聯(lián)系電話！'
},
{
pattern: /^1(3|4|5|7|8)\d{9}$/,
message: '請輸入11位有效手機號！'
},
],
initialValue: '',
})(
<Input id='phone' maxLength={11} />
)}
</FormItem>
</Col>
</Row>? 優(yōu)點：
- 不需要額外寫
checkPhone函數(shù)，直接用pattern進行正則驗證。 - Ant Design 會自動處理錯誤提示，不需要手動
alert。
寫法3：validator 自定義驗證（更靈活）
（需求：除了漢字和字母不能輸入以外，其他的都可輸入）
const FormItem = Form.Item
<Row>
<Col>
<FormItem label='聯(lián)系電話'>
{getFieldDecorator('phone', {
rules:[
{
required: true,
message: '請輸入聯(lián)系電話！'
},
{
pattern: /^1[3-9]\d{9}$/,
message: '請輸入11位有效手機號！'
},
{
validator: (rule, value, callback) => {
const reg = new RegExp('[\u4E00-\u9FA5]')
const reg1 = new RegExp('[A-Za-z]')
if(reg.test(value)){
callback('手機號碼不能輸入漢字！')
} else if (reg1.test(value)){
callback('手機號碼不能輸入字母！')
} else {
callback()
}
}
}],
})(
<Input id='phone' maxLength={11} />
)}
</FormItem>
</Col>
</Row>? 優(yōu)點：
- 可以自定義更復雜的驗證邏輯（如異步校驗）。
- 仍然不需要手動操作 DOM（
document.getElementById）。
擴展建議
國際號碼支持
若需支持國際號碼，可替換正則為：
pattern: /^(?:\+?86)?1[3-9]\d{9}$|^(?:\+?\d{1,3})?\d{6,15}$/動態(tài)校驗
通過 setFieldsValue 實現(xiàn)聯(lián)動校驗（如區(qū)號+座機號場景）。
防抖優(yōu)化
頻繁校驗時建議添加防抖：
import { debounce } from 'lodash';
validator: debounce((rule, value, callback) => { ... }, 300)
// 代碼：
rules: {
username: [
{ required: true, message: '必填項' },
{
validator: debounce((rule, value, callback) => {
if (/[^a-z]/.test(value)) callback('僅允許小寫字母');
else callback();
}, 1000),
trigger: 'blur' // 明確防抖觸發(fā)條件。防抖場景必須聲明?：防抖函數(shù)需綁定明確的事件（如 blur 或 change）?
}
]
}| 場景 | 防抖配置 | 優(yōu)勢 |
|---|---|---|
| 輸入實時搜索 | delay: 300ms | 減少搜索接口調(diào)用 |
| 異步唯一性校驗 | delay: 1000ms | 避免頻繁請求 |
| 多字段聯(lián)合校驗 | 共享防抖實例 | 統(tǒng)一控制校驗節(jié)奏 |
trigger: 'blur'表示輸入框失去焦點時觸發(fā)校驗，適合實時性要求較低的場景（如避免輸入中途頻繁提示）17。trigger: 'change'會在值變化時立即校驗，適合需要即時反饋的交互（如密碼強度檢測）場景 是否需要顯式聲明 原因 需要實時校驗 可選（建議聲明） 明確控制觸發(fā)時機，避免依賴默認行為 僅提交時校驗 可不寫 默認行為已滿足需求 防抖場景 必須聲明 防抖函數(shù)需綁定明確的事件觸發(fā)點（如 blur），否則無法生效
電話號碼校驗，上面的pattern方法、validator方法都適用
function phoneValid(number) {
// 去除任何非數(shù)字字符
const cleaned = number.replace(/\D/g, '');
// 定義正則表達式驗證規(guī)則
const mobilePattern = /^1[3-9]\d{9}$/; // 手機號
const tellPattern = /^0\d{2,3}-?\d{7,8}$/; // 電話號
// 驗證是否符合手機號碼或座機號碼格式
if (mobilePattern.test(cleaned) || tellPattern.test(cleaned)) {
return true;
} else {
return false;
}
}
// 示例用法
console.log(phoneValid('13800138000')); // true
console.log(phoneValid('010-12345678')); // true
console.log(phoneValid('12345678')); // false
console.log(phoneValid('021-87654321')); // true
console.log(phoneValid('18912345678')); // true空格校驗
const FormItem = Form.Item
<Row>
<Col>
<FormItem label='聯(lián)系電話'>
{getFieldDecorator('phone', {
getValueFormEvent: (e) => e.target.value.replace(/^\s+|\s$/g,'')
initialValue: '',
})(
<Input id='phone' />
)}
</FormItem>
</Col>
</Row>
// " hello world ".replace(/^\s+|\s+$/g, ""); // 輸出 "hello world"?:ml-citation{ref="1,3" data="citationList"}
| 語法 | 含義 | 示例匹配場景 | |
|---|---|---|---|
^\s+ | 匹配字符串開頭的1個或多個空白字符（空格、制表符、換行符等） | " hello" 中的開頭空格 | |
\s+$ | 匹配字符串末尾的1個或多個空白字符 | "world " 中的末尾空格 | |
| ` | ` | 邏輯“或”操作符，匹配兩者之一 | 同時處理開頭和末尾空格 |
g | 全局匹配模式，替換所有符合條件的內(nèi)容（而非僅第一個） | 多次替換 |
\s
匹配單個空白字符，包括：- 空格（
- 制表符（
\t） - 換行符（
\n） - 換頁符（
\f）等。
注：\S表示其反向匹配（非空白字符）。
- 空格（
^和$^匹配字符串的起始位置（需在開頭）。$匹配字符串的結(jié)束位置（需在末尾）。
+
表示前面的字符（\s）至少出現(xiàn)1次（等價于{1,}）若需嚴格匹配純空格（不含制表符等），可用
[ ]+替代\s+在拆分字符串時，
\s常用于分割單詞（如split(/\s+/)）正則表達式 作用 區(qū)別 /\s+/g匹配所有連續(xù)空白字符 不限定位置，包括中間空格3 /^\s+/g僅匹配開頭空白字符 忽略末尾空格3 /\s+$/g僅匹配末尾空白字符 忽略開頭空格
總結(jié)
到此這篇關(guān)于JavaScript中的校驗機制三種寫法的文章就介紹到這了,更多相關(guān)JS手機號碼、電話號碼校驗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了webpack 從指定入口文件中提取公共文件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了JavaScript前補零操作的方法,以實例形式對比分析了javascript實現(xiàn)補零操作的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了js+css實現(xiàn)文字散開重組動畫特效,需要的朋友可以參考下2015-08-08
最近使用了electron框架,發(fā)現(xiàn)如果自定義拖動是比較實用的;特別是定制化比較高的項目,如果單純的使用-webkit-app-region:?drag;會讓鼠標事件無法觸發(fā),這篇文章主要介紹了Electron無邊框自定義窗口拖動的問題小結(jié),需要的朋友可以參考下2024-04-04
JS執(zhí)行是單線程的，它是基于事件循環(huán)的，那么本篇博文就來分享一下關(guān)于JS的事件循環(huán)執(zhí)行機制，感興趣的小伙伴可以跟著小編一起來學習2023-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)隨機抽獎功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要為大家介紹了JS利用中介模式開發(fā)全局控制器圖文示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
本例子在在 ff 2.0/ ie6 / ie7 中測試通過。但在 opera 8.5 cn中沒有通過。希望大家測試。2008-12-12
最近的項目需要將日期轉(zhuǎn)換成中文的格式，于是寫了個小小的JS函數(shù)，使用時直接調(diào)用即可.2009-07-07
sass 中使用 /deep/ 修改 elementUI 組件樣式報錯
這篇文章主要介紹了sass 中使用 /deep/ 修改 elementUI 組件樣式報錯的解決方案,嘗試用 ::v-deep 替換 /deep/ ,成功解決了問題,感興趣的朋友跟隨小編一起看看吧2024-02-02