Vue.js?rules校驗規(guī)則舉例詳解
Vue.js 提供了一套輕量級的、可擴展的模板校驗規(guī)則。這些規(guī)則可以通過在v-model綁定中添加.modifier來使用，例如v-model.trim
下面是一些常見的 Vue.js 校驗規(guī)則：
required: 檢查值是否非空email: 檢查值是否符合電子郵件格式min: 檢查值是否大于等于指定的最小值max: 檢查值是否小于等于指定的最大值minLength: 檢查值的長度是否大于等于指定的最小長度maxLength: 檢查值的長度是否小于等于指定的最大長度numeric: 檢查值是否為數(shù)字regex: 檢查值是否符合指定的正則表達式
這是使用 .modifier 將這些規(guī)則應(yīng)用于 v-model 的一個例子：
<template>
<div>
<input v-model.trim="username" required>
<input v-model.trim="email" type="email" required>
<input v-model.number="age" type="number" min="18" max="99" required>
</div>
</template>
在這個例子中：
v-model.trim將輸入值去掉前后空格required校驗輸入是否非空type="email"校驗輸入是否符合電子郵件格式v-model.number將輸入轉(zhuǎn)換成數(shù)字min和max校驗輸入是否在指定范圍內(nèi)
除了這些內(nèi)置的校驗規(guī)則，你還可以使用自定義的校驗函數(shù)。校驗函數(shù)應(yīng)該返回一個布爾值，代表輸入是否合法，例如：
<template>
<div>
<input v-model="password" :class="{ invalid: !validatePassword }">
</div>
</template>
<script>
export default {
data() {
return {
password: '',
};
},
computed: {
validatePassword() {
return this.password.length >= 8;
},
},
};
</script>
在這個例子中，我們使用了一個計算屬性 validatePassword，它根據(jù)密碼的長度來返回一個布爾值。我們還在輸入框上綁定了一個類名 invalid，如果輸入不符合規(guī)則，就將這個類名添加到輸入框上。
前端Vue中常用rules校驗規(guī)則:
1、是否合法IP地址:
pattern:/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,2.是否手機號碼或者固話
pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,3. 是否身份證號碼
pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,4.是否郵箱
pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,
5.整數(shù)填寫
pattern:/^-?[1-9]\d*$/,
6.正整數(shù)填寫
pattern:/^[1-9]\d*$/,
7.小寫字母
pattern:/^[a-z]+$/,
8.大寫字母
pattern:/^[A-Z]+$/,
9.大小寫混合
pattern:/^[A-Za-z]+$/,
10.多個8位數(shù)字格式(yyyyMMdd)并以逗號隔開
pattern:/^\d{8}(\,\d{8})*$/,11.數(shù)字加英文，不包含特殊字符
pattern:/^[a-zA-Z0-9]+$/,
12.前兩位是數(shù)字后一位是英文
pattern:/^\d{2}[a-zA-Z]+$/,13.密碼校驗（6-20位英文字母、數(shù)字或者符號（除空格），且字母、數(shù)字和標點符號至少包含兩種）
pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,14.中文校驗
pattern:/^[\u0391-\uFFE5A-Za-z]+$/,
總結(jié)
到此這篇關(guān)于Vue.js rules校驗規(guī)則的文章就介紹到這了,更多相關(guān)Vue rules校驗規(guī)則內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue組件是如何解析及渲染的？，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-01-01
Vue 中使用lodash對事件進行防抖和節(jié)流操作
這篇文章主要介紹了Vue 中使用lodash對事件進行防抖和節(jié)流操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本文主要介紹了vite搭建vue3項目的搭建步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-09-09
這篇文章主要給大家介紹了關(guān)于vue3父組件調(diào)用子組件的方法例子,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-07-07
vue父組件監(jiān)聽子組件數(shù)據(jù)更新方式(hook)
這篇文章主要介紹了vue父組件監(jiān)聽子組件數(shù)據(jù)更新方式(hook)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue+ElementUI實現(xiàn)從后臺動態(tài)填充下拉框的示例代碼
本文主要介紹了Vue+ElementUI實現(xiàn)從后臺動態(tài)填充下拉框的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
文件上傳是一個老生常談的話題了,這篇文章主要介紹了vue3上傳文件、圖片、視頻組件的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2026-05-05
Vue+axios+WebApi+NPOI導(dǎo)出Excel文件實例方法
在本篇文章里小編給大家整理關(guān)于Vue+axios+WebApi+NPOI導(dǎo)出Excel文件的知識點以及實例代碼，需要的朋友們參考下。2019-06-06
Vue表格首列相同數(shù)據(jù)合并實現(xiàn)方法
這篇文章主要介紹了Vue實現(xiàn)表格首列相同數(shù)據(jù)合并的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
本文主要介紹了Vue3父子組件互調(diào)方法的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04