Form
组件绑定model
参数:
model
参数为一个对象,对象属性为需要验证的变量名。- 通过
ref
,在onReady
生命周期调用组件的setRules
方法绑定验证规则,无法通过props
传递变量,是因为微信小程序会过滤掉对象中的方法,导致自定义验证规则无效。
<u-form :model="form" ref="uForm">
<u-form-item prop="phone" required="true" label="电话:">
<u-input v-model="form.phone" />
</u-form-item>
<u-form-item labelWidth="80px" prop="supplyer_email" required="true" label="电子邮件:">
<u-input v-model="form.supplyer_email" />
</u-form-item>
</u-form>
U-form-item绑定label
和prop
此组件最大的作用是与u-form
和u-input
等组件进行交互,在表单验证时,需要绑定prop
参数,此参数为u-form
组件的model
对象中的属性名, 目的是在验证时,通过这个prop
属性名将父组件u-form
的model
和rules
规则关联起来。
注意点:
- 通过
prop
绑定对应的属性名,这里是字符串,而不是一个变量。 - 通过
lable
参数设置左边显示的提示文字,另外通过label-position
可以配置label
在左边还是上方。
在onReady中绑定验证规则:
this.$refs.uForm.setRules(this.rules);
在data函数中创建校验规则:
rules:{
phone: [
{ required: true, message: '请输入电话', trigger: 'blur' },
{ validator: this.checkPhoneNum, trigger: 'blur' },
],
supplyer_email: [
{ required: true, message: '请输入电子邮件', trigger: 'blur' },
{ validator: this.checkEmail, trigger: 'blur' },
],
}
创建checkPhoneNum/checkEmail校验方法:
checkPhoneNum(rule, value, callback) {
var reg = /^1[3456789]\d{9}$/;
if (reg.test(value)) {
callback();
} else {
callback(new Error('手机号码格式不正确'));
}
},
checkEmail (rule, value, callback){//邮箱校验
const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
if (mailReg.test(value)) {
callback();
} else {
callback(new Error('请输入正确的邮箱格式'));
}
},