【Vue】vue iview form表单验证问题

• Z时代
• 2024-01-10
• 分类：技术分享

我写了这么一个表单

<Form ref="title" :model="title" :rules="rule">
<Form-item label="标题颜色" prop="color">
<Input v-model="title.textStyle.color" placeholder="请输入"></Input>
</Form-item>
<Form-item label="字体大小" prop="fontSize">
<Input v-model="title.textStyle.fontSize" placeholder="请输入"></Input>
</Form-item>
</Form>

验证的方法是这样的

const sexadecimal = (rule, val, callback) => {
console.log(rule);
console.log(val);
console.log(options);
callback()
};
const onlyNumber = (rule, val, callback) => {
console.log(rule);
console.log(options);
callback()
};
return {
rule:{
color:[{validator:sexadecimal,message:'格式不正确',trigger: 'blur'}],
fontSize:[{validator:onlyNumber}]
},
}

显示明明是有值的
我是照着官方文档写的，但是val输出的时候，一直是undefined，这是为什么呢？

回答

prop 应该和表单域 model 里的字段保持一致(要么改prop，要么改data和model，这两种都是可行的)

<template>
    <Form ref="title" :model="title" :rules="rule">
        <Form-item label="标题颜色" prop="textStyle.color">
            <Input v-model="title.textStyle.color" placeholder="请输入"></Input>
        </Form-item>
        <Form-item label="字体大小" prop="textStyle.fontSize">
            <Input v-model="title.textStyle.fontSize" placeholder="请输入"></Input>
        </Form-item>
    </Form>
</template>
<script>
export default {
    data() {
       const sexadecimal = (rule, val, callback) => {
            console.log(rule);
            console.log(val); 
            callback()
        };
        const onlyNumber = (rule, val, callback) => {
            console.log(rule);
            console.log(val)
            callback()
        };
        return {
            title: {
                textStyle: {
                    color: '',
                    fontSize: ''
                }
            },
            rule:{
                'textStyle.color': [{validator:sexadecimal, message:'格式不正确', trigger: 'blur'}],
                'textStyle.fontSize': [{validator:onlyNumber}] 
            }
        }
    }
}
</script>

<template>
    <Form ref="title" :model="title" :rules="rule">
        <Form-item label="标题颜色" prop="color">
            <Input v-model="title.color" placeholder="请输入"></Input>
        </Form-item>
        <Form-item label="字体大小" prop="fontSize">
            <Input v-model="title.fontSize" placeholder="请输入"></Input>
        </Form-item>
    </Form>
</template>
<script>
export default {
    data() {
       const sexadecimal = (rule, val, callback) => {
            console.log(rule);
            console.log(val); 
            callback()
        };
        const onlyNumber = (rule, val, callback) => {
            console.log(rule);
            console.log(val)
            callback()
        };
        return {
            title: {
                color: '',
                fontSize: ''
            },
            rule:{
                color: [{validator:sexadecimal, message:'格式不正确', trigger: 'blur'}],
                fontSize: [{validator:onlyNumber}] 
            }
        }
    }
}
</script>

以上是 【Vue】vue iview form表单验证问题 的全部内容， 来源链接： utcz.com/a/82553.html