一、Form组件绑定model参数
model参数为一个对象,对象属性为需要验证的变量名。
由于表单验证和绑定表单规则时,需要通过ref操作,故这里需要给form组件声明ref="uForm"属性。
通过ref,在onReady生命周期调用组件的setRules方法绑定验证规则,无法通过props传递变量,是因为微信小程序会过滤掉对象中的方法,导致自定义验证规则无效。
二、U-form-item绑定prop
- 此组件最大的作用是与u-form和u-input等组件进行交互,在表单验证时,需要绑定prop参数,此参数为u-form组件的model对象中的属性名, 目的是在验证时,通过这个prop属性名将父组件u-form的model和rules规则关联起来。
- 现在情况是要验证model对象中的对象,那么在rules里面就不是直接写name、phone而是要用“”包裹,也是通过点的方式。
- 比如要验证model对象里面的name里面的firstName
<template>
<view class="">
<u-form :model="form" ref="uForm">
<u-form-item label="姓名" prop="name.firstName">
<u-input v-model="form.name.firstName" />
</u-form-item>
<u-button @click="submit">提交</u-button>
</view>
</template>
<script>
export default {
data() {
return {
form: {
name: {
firstName: ""
}
},
rules: {
"name.firstName": [
{
required: true,
message: '请输入姓名',
// 可以单个或者同时写两个触发验证方式
trigger: ['change','blur'],
}
]
}
};
},
methods: {
submit() {
this.$refs.uForm.validate(valid => {
if (valid) {
console.log('验证通过');
} else {
console.log('验证失败');
}
});
}
},
// 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
onReady() {
this.$refs.uForm.setRules(this.rules);
}
};
</script>