詳談vue中的rules表單驗證(常用)
更新時間:2022年06月30日 11:30:48 作者:阿爾茲
這篇文章主要介紹了關于vue中的rules表單驗證(常用),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
首先在表單中綁定rules
并在item中定義屬性prop
<el-form :model="ruleForm" :rules="rules" ref="ruleForm"> ? <el-form-item label="活動名稱" 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: "名稱長度不能超過30位" }]
? ? ? }其中name為prop名
type:類型required:是否必選項(此欄是否為空)message:報錯信息trigger:觸發(fā)方式(blur:失去焦點時進行驗證- 常用:對 input 輸入框的驗證
change:當值發(fā)生變化時進行驗證- 常用:下拉框select,日期選擇框date-picker,復選框checkbox,單選框radio)
也可以直接用pattern進行匹配驗證
name: [ { pattern: 驗證條件, required: true, message: "提示信息", trigger: "blur" }]vue的rules中自帶的校驗規(guī)則和常用正則表達式校驗
rules: {
//驗證非空和長度
name: [{
required: true,
message: "站點名稱不能為空",
trigger: "blur"
},{
min: 3,
max: 5,
message: '長度在 3 到 5 個字符',
trigger: 'blur'
}],
//驗證數(shù)值
age: [{
type: 'number',
message: '年齡必須為數(shù)字值',
trigger: "blur"
}],
//驗證日期
birthday:[{
type: 'date',
required: true,
message: '請選擇日期',
trigger: 'change'
}],
//驗證多選
habit: [{
type: 'array',
required: true,
message: '請至少選擇一個愛好',
trigger: 'change'
}],
//驗證郵箱
email: [{
type: 'email',
message: '請輸入正確的郵箱地址',
trigger: ['blur', 'change']
}],
// 驗證手機號
telephone: [{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "請輸入正確的手機號碼",
trigger: "blur"
}],
// 驗證經(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"
}],
// 驗證維度 整數(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校驗規(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]+$/,
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue用elementui寫form表單時,在label里添加空格操作
- vue+ElementUI 關閉對話框清空驗證,清除form表單的操作
- vue elementui el-form rules動態(tài)驗證的實例代碼詳解
- vue elementui form表單驗證的實現(xiàn)
- Vue ElementUI之Form表單驗證遇到的問題
- Vue 清除Form表單校驗信息的解決方法(清除表單驗證上次提示信息)
- Vue3?+?elementplus實現(xiàn)表單驗證+上傳圖片+?防止表單重復提交功能
- vue表單驗證rules及validator驗證器的使用方法實例
- Vue3實現(xiàn)登錄表單驗證功能
- vue表單驗證自定義驗證規(guī)則詳解
- vue3在table里使用elementUI的form表單驗證的示例代碼
相關文章
在vue和element-ui的table中實現(xiàn)分頁復選功能
這篇文章主要介紹了在vue和element-ui的table中實現(xiàn)分頁復選功能,本文代碼結合圖文的形式給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12

