詳談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規則
rules { name: [ { type: 'string',required: true,message: "名稱必填", trigger: 'blur'}, {max: 30,message: "名稱長度不能超過30位" }] }
其中name為prop名
type
:類型required
:是否必選項(此欄是否為空)message
:報錯信息trigger
:觸發方式(blur
:失去焦點時進行驗證- 常用:對 input 輸入框的驗證
change
:當值發生變化時進行驗證- 常用:下拉框select,日期選擇框date-picker,復選框checkbox,單選框radio)
也可以直接用pattern進行匹配驗證
name: [ { pattern: 驗證條件, required: true, message: "提示信息", trigger: "blur" }]
vue的rules中自帶的校驗規則和常用正則表達式校驗
rules: { //驗證非空和長度 name: [{ required: true, message: "站點名稱不能為空", trigger: "blur" },{ min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }], //驗證數值 age: [{ type: 'number', message: '年齡必須為數字值', 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" }], // 驗證經度 整數部分為0-180小數部分為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: "整數部分為0-180,小數部分為0到7位", trigger: "blur" }], // 驗證維度 整數部分為0-90小數部分為0到7位 latitude: [{ pattern: /^(\-|\+)?([0-8]?\d{1}\.\d{0,7}|90\.0{0,6}|[0-8]?\d{1}|90)$/, message: "整數部分為0-90,小數部分為0到7位", trigger: "blur" }] }
前端Vue中常用rules校驗規則
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.整數填寫
pattern:/^-?[1-9]\d*$/,
6.正整數填寫
pattern:/^[1-9]\d*$/,
7.小寫字母
pattern:/^[a-z]+$/,
8.大寫字母
pattern:/^[A-Z]+$/,
9.大小寫混合
pattern:/^[A-Za-z]+$/,
10.多個8位數字格式(yyyyMMdd)並以逗號隔開
pattern:/^\d{8}(\,\d{8})*$/,
11.數字加英文,不包含特殊字符
pattern:/^[a-zA-Z0-9]+$/,
12.前兩位是數字後一位是英文
pattern:/^\d{2}[a-zA-Z]+$/,
13.密碼校驗(6-20位英文字母、數字或者符號(除空格),且字母、數字和標點符號至少包含兩種)
pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,
14.中文校驗
pattern:/^[\u0391-\uFFE5A-Za-z]+$/,
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- vue表單驗證rules及validator驗證器的使用方法實例
- vue開發中後臺系統復雜表單優化技巧
- Vue使用antd中input組件去驗證輸入框輸入內容(rules 案例)
- el-form resetFields無效和validate無效的可能原因及解決方法
- Vue實現登錄以及登出詳解