詳談vue中的rules表單驗(yàn)證(常用)
首先在表單中綁定rules
并在item中定義屬性prop
<el-form :model="ruleForm" :rules="rules" ref="ruleForm"> ? <el-form-item label="活動(dòng)名稱" prop="name"> ? ? <el-input v-model="ruleForm.name"></el-input> ? </el-form-item> </el-form>
在data或computed中編寫rules規(guī)則
rules {?? ? ? ? ? name: [ { type: 'string',required: true,message: "名稱必填", trigger: 'blur'}, {max: 30,message: "名稱長(zhǎng)度不能超過(guò)30位" }] ? ? ? }
其中name為prop名
type
:類型required
:是否必選項(xiàng)(此欄是否為空)message
:報(bào)錯(cuò)信息trigger
:觸發(fā)方式(blur
:失去焦點(diǎn)時(shí)進(jìn)行驗(yàn)證- 常用:對(duì) input 輸入框的驗(yàn)證
change
:當(dāng)值發(fā)生變化時(shí)進(jìn)行驗(yàn)證- 常用:下拉框select,日期選擇框date-picker,復(fù)選框checkbox,單選框radio)
也可以直接用pattern進(jìn)行匹配驗(yàn)證
name: [ { pattern: 驗(yàn)證條件, required: true, message: "提示信息", trigger: "blur" }]
vue的rules中自帶的校驗(yàn)規(guī)則和常用正則表達(dá)式校驗(yàn)
rules: { //驗(yàn)證非空和長(zhǎng)度 name: [{ required: true, message: "站點(diǎn)名稱不能為空", trigger: "blur" },{ min: 3, max: 5, message: '長(zhǎng)度在 3 到 5 個(gè)字符', trigger: 'blur' }], //驗(yàn)證數(shù)值 age: [{ type: 'number', message: '年齡必須為數(shù)字值', trigger: "blur" }], //驗(yàn)證日期 birthday:[{ type: 'date', required: true, message: '請(qǐng)選擇日期', trigger: 'change' }], //驗(yàn)證多選 habit: [{ type: 'array', required: true, message: '請(qǐng)至少選擇一個(gè)愛好', trigger: 'change' }], //驗(yàn)證郵箱 email: [{ type: 'email', message: '請(qǐng)輸入正確的郵箱地址', trigger: ['blur', 'change'] }], // 驗(yàn)證手機(jī)號(hào) telephone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "請(qǐng)輸入正確的手機(jī)號(hào)碼", trigger: "blur" }], // 驗(yàn)證經(jīng)度 整數(shù)部分為0-180小數(shù)部分為0到7位 longitude: [{ pattern: /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,7})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/, message: "整數(shù)部分為0-180,小數(shù)部分為0到7位", trigger: "blur" }], // 驗(yàn)證維度 整數(shù)部分為0-90小數(shù)部分為0到7位 latitude: [{ pattern: /^(\-|\+)?([0-8]?\d{1}\.\d{0,7}|90\.0{0,6}|[0-8]?\d{1}|90)$/, message: "整數(shù)部分為0-90,小數(shù)部分為0到7位", trigger: "blur" }] }
前端Vue中常用rules校驗(yàn)規(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.是否手機(jī)號(hào)碼或者固話
pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,
3. 是否身份證號(hào)碼
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.多個(gè)8位數(shù)字格式(yyyyMMdd)并以逗號(hào)隔開
pattern:/^\d{8}(\,\d{8})*$/,
11.數(shù)字加英文,不包含特殊字符
pattern:/^[a-zA-Z0-9]+$/,
12.前兩位是數(shù)字后一位是英文
pattern:/^\d{2}[a-zA-Z]+$/,
13.密碼校驗(yàn)(6-20位英文字母、數(shù)字或者符號(hào)(除空格),且字母、數(shù)字和標(biāo)點(diǎn)符號(hào)至少包含兩種)
pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,
14.中文校驗(yàn)
pattern:/^[\u0391-\uFFE5A-Za-z]+$/,
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue用elementui寫form表單時(shí),在label里添加空格操作
- vue+ElementUI 關(guān)閉對(duì)話框清空驗(yàn)證,清除form表單的操作
- vue elementui el-form rules動(dòng)態(tài)驗(yàn)證的實(shí)例代碼詳解
- vue elementui form表單驗(yàn)證的實(shí)現(xiàn)
- Vue ElementUI之Form表單驗(yàn)證遇到的問(wèn)題
- Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息)
- Vue3?+?elementplus實(shí)現(xiàn)表單驗(yàn)證+上傳圖片+?防止表單重復(fù)提交功能
- vue表單驗(yàn)證rules及validator驗(yàn)證器的使用方法實(shí)例
- Vue3實(shí)現(xiàn)登錄表單驗(yàn)證功能
- vue表單驗(yàn)證自定義驗(yàn)證規(guī)則詳解
- vue3在table里使用elementUI的form表單驗(yàn)證的示例代碼
相關(guān)文章
vue返回上一頁(yè)面時(shí)回到原先滾動(dòng)的位置的方法
這篇文章主要介紹了vue返回上一頁(yè)面時(shí)回到原先滾動(dòng)的位置的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12在vue和element-ui的table中實(shí)現(xiàn)分頁(yè)復(fù)選功能
這篇文章主要介紹了在vue和element-ui的table中實(shí)現(xiàn)分頁(yè)復(fù)選功能,本文代碼結(jié)合圖文的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12vue中數(shù)據(jù)請(qǐng)求axios的封裝和使用
這篇文章主要介紹了vue中數(shù)據(jù)請(qǐng)求axios的封裝和使用,Axios?是一個(gè)基于?promise?的?HTTP?庫(kù),下面文章圍繞主題的相關(guān)資料展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-04-04Vue鼠標(biāo)點(diǎn)擊事件和鍵盤事件舉例詳解
在Vue框架中我們經(jīng)常需要綁定各種JS事件,如"點(diǎn)擊事件"、"鼠標(biāo)移動(dòng)事件"、"鍵盤事件"等等,這篇文章主要給大家介紹了關(guān)于Vue鼠標(biāo)點(diǎn)擊事件和鍵盤事件的相關(guān)資料,需要的朋友可以參考下2024-01-01Vue實(shí)現(xiàn)表格批量審核功能實(shí)例代碼
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)表格批量審核功能實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05