页面加载时设置rules,表单u–form标签中不写:rules = rules
生命周期onReady()
举例密码
<template>
<u--form :model="form" ref="uForm">
<u-form-item prop="password" borderBottom label="密码">
<u-input
v-model="form.password"
placeholder="6~20位两位字符以上组合"
border="none"
clearable />
</u--form>
</template>
data(){
return {
form: {
password: ''
}
rules: {
password: [
{
required: true,
message: '请填写密码',
trigger: ['blur', 'change']
},
{
validator: (rule, value, callback) => {
return RegExp(
/^(?![\d]+$)(?![a-zA-Z]+$)(?![-=+_.,]+$)[\da-zA-Z-=+_.,]{6,20}$/
).test(value)
},
message: '6~18位两位字符以上组合',
trigger: ['change', 'blur']
}
]
}
}
},
onReady() {
this.$refs['uForm'].setRules(this.rules)
},
单独校验表单其中一个元素时
testPassWord() {
this.$refs['uForm'].validateField(['password'], async (valid) => {
}
}