1.声明model
userInfo: {
name: '',
phone: '',
address:"",
detailedddress:""
}
2.放入u-form组件
<u-form
:model="userInfo"
:rules="rules"
ref="form"
>
3.设置rules
rules: {
phone: [{
type: 'string',
max: 11,
min:11,
required: true,
message: '请输入正确手机号',
trigger: ['blur', 'change']
},
{
// 自定义验证函数,见上说明
validator: mobile,
message: '手机号码不正确',
// 触发器可以同时用blur和change
trigger: ['change', 'blur'],
}
],
}
4.自定义规则
data() {
const mobile = (rule, value, callback) => {
/^1[3-9]\d{9}$/.test(value) ? callback() : callback(new Error('请输入正确的手机号码'))
}
return {
}
5.规则设置进表单(重点)
//如果是自己封装的组件就是mounted()
//如果不是组件就是onReady()
mounted() {
this.$refs.form1.setRules(this.rules);
}