vue elementUI form验证遇到的坑

头像
suipa
    阅读 9 分钟

    问题一:动态控制某项的是否验证

    场景:form 表单里 前面一个select选择国家，后面的详细地址input用来输入详细地址，规则:select选择中国后，详细地址必须校验，选择其他国家，详细地址非必填项。
    `
    • 解决思路：
    • 通过计算属性动态改变prop的值来增加和去除规则
    <!DOCTYPE html>
<html>

<head>
    <meta name="description" content="" />
    <meta charset="utf-8">
    <title>element form 动态控制某项的是否验证</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/index.js"></script>
</head>

<body>
    <div id="app">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="国籍选择" prop="gj">
                <el-select v-model="ruleForm.gj" placeholder="请选择活动区域" @change="gjChange">
                    <el-option label="中国" value="china"></el-option>
                    <el-option label="其他国家" value="other"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="详细地址" ref="xxdz" :prop="xxdz">
                <el-input type="text" v-model="ruleForm.dz"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script>
        var Main = {
            data() {
                return {
                    ruleForm: {
                        gj: '',
                        dz: '',
                    },
                    rules: {
                        gj: [{
                                required: true,
                                message: '请选择国籍',
                                trigger: 'change'
                            }
                        ],
                        dz: [{
                            required: true,
                            message: '请输入详细地址',
                            trigger: 'blur'
                        }],
                    }
                };
            },
            computed: {
                xxdz(){
                    console.log(this.ruleForm.gj,'gj-----')
                    if(this.ruleForm.gj == "china"){
                        return 'dz'
                    }else{
                        return 'no'
                    }
                }
            },
            methods: {
                gjChange(val){
                    //清除详细地址验证
                    this.$refs['xxdz'].clearValidate();
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            alert('submit!');
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                }
            }
        };
        var Ctor = Vue.extend(Main)
        new Ctor().$mount('#app')
    </script>
</body>

</html>

    `

    问题二：单独去除form某一项的规则

    `

    //要删除的某项验证加ref
<el-form-item label="详细地址" ref="xxdz" :prop="xxdz">
        <el-input type="text" v-model="ruleForm.dz"></el-input>
</el-form-item>
//具体删除使用clearValidate()            
`this.$refs['xxdz'].clearValidate();`

    `

    问题三：el-form-item嵌套el-form-item的问题

    问题三.png
    外层el-form-item加必填项方式为外层el-form-item层加required
    `

    <!DOCTYPE html>
<html>

<head>
    <meta name="description" content="" />
    <meta charset="utf-8">
    <title>element form 动态控制某项的是否验证</title>
    <style>
        .four-col-one{
            padding-left: 0!important;
            padding-right: 10px!important;
            margin-bottom: 20px!important;
        }
        .four-col-two{
            padding-left: 10px!important;
            padding-right: 0px!important;
            margin-bottom: 20px!important;
        }
        .four-col-three{
            padding-left: 0!important;
            padding-right: 10px!important;
            margin-bottom: 0!important;
        }
        .four-col-four{
            padding-left: 10px!important;
            padding-right: 0!important;
            margin-bottom: 0!important;
        }
    </style>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/index.js"></script>
</head>

<body>
    <div id="app">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row :gutter="90">
                <el-col :span="24">
                    <el-form-item label="人员信息"  required>
                        <el-col :span="12" class="four-col-one">
                            <el-form-item  prop="one">
                                <el-input v-model="ruleForm.one" placeholder="请输入姓名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="four-col-two">
                            <el-form-item  prop="two">
                                <el-input v-model="ruleForm.two" placeholder="请输入电话号码"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="four-col-three">
                            <el-form-item  prop="three">
                                <el-input v-model="ruleForm.three" placeholder="请输入年龄"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="four-col-four">
                            <el-form-item  prop="four">
                                <el-input v-model="ruleForm.four" placeholder="请输入身份证件号码"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <script>
        var Main = {
            data() {
                return {
                    ruleForm: {
                        gj: '',
                        one: '',
                        two:'',
                        three:"",
                        four:""
                    },
                    rules: {
                        gj: [{
                                required: true,
                                message: '请输入人员信息',
                                trigger: 'change'
                            }
                        ],
                        one: [{
                            required: true,
                            message: '请输入姓名',
                            trigger: 'blur'
                        }],
                        two: [{
                            required: true,
                            message: '请输入电话号码',
                            trigger: 'blur'
                        }],
                        three: [{
                            required: true,
                            message: '请输入年龄',
                            trigger: 'blur'
                        }],
                        four: [{
                            required: true,
                            message: '请输入身份证件号码',
                            trigger: 'blur'
                        }],
                    }
                };
            },
            computed: {
                xxdz(){
                    console.log(this.ruleForm.gj,'gj-----')
                    if(this.ruleForm.gj == "china"){
                        return 'dz'
                    }else{
                        return 'no'
                    }
                }
            },
            methods: {
                gjChange(val){
                    //清除详细地址验证
                    this.$refs['xxdz'].clearValidate();
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            alert('submit!');
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                }
            }
        };
        var Ctor = Vue.extend(Main)
        new Ctor().$mount('#app')
    </script>
</body>

</html>

    `

    问题四：验证某一项字段

    `

    this.$refs['form'].validateField('identity', function(identitylError){
                    if (!identitylError) {
                        _self.$refs['identityForm'].clearValidate();
                    } else {
                        return false;
                    }
                });

    `

    vue.jselement-ui前端
    suipa
    237 声望16 粉丝

    前端程序猿

    « 上一篇
    bootstrap 时间控件
    下一篇 »
    ps第一天换人物背景

    引用和评论

    推荐阅读
    头像
    vue2+element+修改主题

    suipa阅读 994

    头像
    CSS团队协作规范

    寒青赞 36阅读 4k

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.7k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.2k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    0 条评论
    得票最新