20180327_字段B的校验规则根据字段A的值发生改变实现方案

[openks]

文本域的校验规则根据另一个字段的值发生改变，如左侧为身份证号与护照，则右侧对应输入框分别用不同的校验规则

<!-- 动态设置校验规则 -->
<template>
<el-dialog title="动态设置校验规则"
           :visible.sync="dialogVisible"
           size="small"
           :close-on-click-modal="false"
           :close-on-press-escape="false"
           :show-close="false">
    <el-form ref="form"
             :model="form"
             :rules="rules"
             label-width="80px">
        <el-form-item label="证件信息"
                      required>
            <el-row>
                <el-col :span="8">
                    <el-form-item prop="certificateType">
                        <el-select v-model="form.certificateType"
                                   clearable
                                   @change="changeHander"
                                   placeholder="请选择证件类型">
                            <el-option label="身份证"
                                       value="id"></el-option>
                            <el-option label="护照"
                                       value="passPort"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col class="line"
                        :span="1">&nbsp;</el-col>
                <el-col :span="15">
                    <el-form-item label=""
                                  ref="certificateNum"
                                  :rules="certificateNumRule"
                                  prop="certificateNum">
                        <el-input placeholder="请输入证件号"
                                  v-model="form.certificateNum"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form-item>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
        <el-button @click="cancelDialog('form')"
                   size="small">取 消</el-button>
        <el-button type="primary"
                   @click="saveDialog('form')"
                   size="small">确 定</el-button>
    </div>
</el-dialog>
</template>

<script>
export default {
    props: {
        visible: {
            type: Boolean,
            default: true,
        },
    },
    computed: {
        dialogVisible: {
            set (newValue) {
                this.$emit('update:visible', newValue)
            },
            get () {
                return this.visible
            },
        },
    },
    data () {
        return {
            certificateNumRule: [],
            form: {
                certificateType: '',
                certificateNum: '',
            },
            rules: {
                id: [{
                    required: true,
                    min: 18,
                    max: 18,
                    message: '请输入长度18位的身份证号',
                    trigger: 'blur',
                }, ],
                passPort: [{
                    required: true,
                    min: 6,
                    max: 6,
                    message: '请输入长度6位的护照号',
                    trigger: 'blur',
                }, ],
                certificateType: [{
                    required: true,
                    message: '请选择证件类型',
                    trigger: 'blur,change',
                }, ],
            },
        }
    },
    methods: {
        changeHander (val) {
            if (val === 'id') {
                this.certificateNumRule = this.rules.id
            } else if (val === 'passPort') {
                this.certificateNumRule = this.rules.passPort
            } else {
                this.certificateNumRule = []
            }
            this.$nextTick(() => {
                this.$refs.certificateNum.resetField()
                // 清空原来的校验结果
                this.$refs.certificateNum.resetField()
            })
        },
        cancelDialog (formName) {
            this.$refs[formName].resetFields()
            this.dialogVisible = false
            this.$emit('cancel')
        },
        saveDialog (formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    console.log('校验通过')
                } else {
                    console.log('校验失败')
                }
            })
        },
    },
}
</script>