JavaScript中的校驗機制三種寫法舉例(如手機號碼、電話號碼校驗)
更新時間：2025年04月23日 09:08:22 作者：outstanding木槿
這篇文章主要給大家介紹了關于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次。
總結
| 方案 | 推薦度 | 適用場景 |
|---|---|---|
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;
}
}
// 在提交表單時調用
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 | 減少搜索接口調用 |
| 異步唯一性校驗 | 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 | 全局匹配模式，替換所有符合條件的內容（而非僅第一個） | 多次替換 |
\s
匹配單個空白字符，包括：- 空格（
- 制表符（
\t） - 換行符（
\n） - 換頁符（
\f）等。
注：\S表示其反向匹配（非空白字符）。
- 空格（
^和$^匹配字符串的起始位置（需在開頭）。$匹配字符串的結束位置（需在末尾）。
+
表示前面的字符（\s）至少出現(xiàn)1次（等價于{1,}）若需嚴格匹配純空格（不含制表符等），可用
[ ]+替代\s+在拆分字符串時，
\s常用于分割單詞（如split(/\s+/)）正則表達式 作用 區(qū)別 /\s+/g匹配所有連續(xù)空白字符 不限定位置，包括中間空格3 /^\s+/g僅匹配開頭空白字符 忽略末尾空格3 /\s+$/g僅匹配末尾空白字符 忽略開頭空格
總結
到此這篇關于JavaScript中的校驗機制三種寫法的文章就介紹到這了,更多相關JS手機號碼、電話號碼校驗內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
再一次項目上用到ie的userdata，考慮當用戶不使用flash插件用于存儲一些聊天記錄2010-07-07
本篇文章主要介紹了js使用i18n實現(xiàn)頁面國際化的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)炫酷的煙花效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Bootstrap popover 實現(xiàn)鼠標移入移除顯示隱藏功能方法
下面小編就為大家分享一篇Bootstrap popover 實現(xiàn)鼠標移入移除顯示隱藏功能方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
記錄滾動條位置（使用userdate）...2007-01-01
用js實現(xiàn)輸入提示(自動完成)的實例代碼，需要的朋友可以參考一下2013-06-06
最近在看一些Javascript玩魔術的資料，感嘆那些真正的是在玩技術，相當讓人佩服。2011-04-04
uview-plus是uni-app全面兼容nvue的uni-app生態(tài)框架,全面的組件和便捷的工具會讓您信手拈來,下面這篇文章主要給大家介紹了關于uniapp使用第三方UI庫uview-plus的方法,需要的朋友可以參考下2023-04-04
頁面JS光標/鼠標坐標，百度統(tǒng)計中有個熱點統(tǒng)計圖，我們要做的就是獲取光標的像素坐標2013-11-11
這篇文章主要介紹了微信小程序之高德地圖多點路線規(guī)劃過程示例詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01