【插件】(uView 2.x)表单自定义校验失效问题

325 阅读1分钟

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);
}