http://www.reibang.com/p/a2164e370e29
正則參考
https://www.cnblogs.com/zxin/archive/2013/01/26/2877765.html
思否 博客
https://segmentfault.com/a/1190000020410128
1）第一種常用方式：表單上加rules｛object｝
比較適用于表單全部字段校驗(yàn)或需要校驗(yàn)字段類型比較簡單的數(shù)據(jù)類型
data() {
let reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{6,12}$/
var validateNewPwd = (rule, value, callback) => {
if (!reg.test(value)) {
callback(new Error('密碼應(yīng)是6-12位數(shù)字、字母或字符！'))
} else if (this.form.oldPasswd === value) {
callback(new Error('新密碼與舊密碼不可一致抖韩！'))
} else {
callback()
}
}
var validateComfirmPwd = (rule, value, callback) => {
if (!reg.test(value)) {
callback(new Error('密碼應(yīng)是6-12位數(shù)字、字母或字符昆箕！'))
} else if (this.form.newPasswd !== value) {
callback(new Error('確認(rèn)密碼與新密碼不一致晰韵！'))
} else {
callback()
}
}
return {
form: {
newPasswd: '',
comfirmPwd: ''
},
rules: {
newPasswd: [
{ required: true, message: '請輸入新密碼', trigger: 'blur' },
{ validator: validateNewPwd, trigger: 'blur' }
],
comfirmPwd: [
{ required: true, message: '請輸入確認(rèn)密碼', trigger: 'blur' },
{ validator: validateComfirmPwd, trigger: 'blur' }
]
}
}
}
2）第二種方式：在el-form-item單個(gè)添加
pattern: /^((13|14|15|16|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/
表達(dá)式 注意這里的正則表單要用 “\\” 代表一個(gè) "\ "
<el-form-item label="電話號(hào)碼" class="el-form-item--small has-error" :prop="phoneNum" :rules="[{ required: true, message: '請輸入電話號(hào)碼', trigger: 'blur' }, { required: true, pattern: /^((13|14|15|16|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/, message: '請輸入正確的電話號(hào)碼', trigger: 'blur' }]">
如下面校驗(yàn) https url規(guī)則時(shí)
pattern: /^((https)?:\\/\\/)[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/
3）第三種方式：動(dòng)態(tài)增減表單項(xiàng)
對應(yīng)的數(shù)據(jù)結(jié)構(gòu)：
image.png
對應(yīng)的數(shù)據(jù)結(jié)構(gòu)：
image.png
addPhone() {
let len = this.formData.phoneInfoList.length
this.$set(this.formData.phoneInfoList, len, {
relation: [],
phoneNum: '',
relationType: 0,
schoolId: this.selectedUser.schoolId,
userCode: this.selectedUser.userCode
})
},
deletePhone(item) {
if (this.formData.phoneInfoList.length > 1) {
// 表示先獲取這個(gè)元素的下標(biāo)惹挟，然后從這個(gè)下標(biāo)開始計(jì)算蒲凶，刪除長度為1的元素
this.formData.phoneInfoList.splice(this.formData.phoneInfoList.indexOf(item), 1);
} else {
this.$vux.toast.text('至少保留一個(gè)家長親情號(hào)碼气筋！')
return false
}
},
這個(gè)場景下的rule、prop直接寫是對應(yīng)不上對應(yīng)不上表單mode綁定的對象上的屬性的旋圆，所以在此要用循環(huán)的方式找到要校驗(yàn)的字段所在數(shù)據(jù)中的索引宠默，然后再以字符串拼接的方式連上校驗(yàn)字段名稱：
image.png
渲染出來的html為：
image.png
