vue.js - vue iview form表单验证问题

问题描述

问 题

我写了这么一个表单

<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.js - vue iview form表单验证问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！