element-ui表单及行内元素验证

1.表单及验证

<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="活动名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                <el-option v-for="item in regionOption" :label="item.label" :value="item.value" :key="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="活动时间" required>
            <el-col :span="11">
                <el-form-item prop="date1">
                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-form-item prop="date2">
                    <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;">
                    </el-time-picker>
                </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item label="即时配送" prop="delivery">
            <el-switch v-model="ruleForm.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="特殊资源" prop="resource">
            <el-radio-group v-model="ruleForm.resource">
                <el-radio :label="1">线上品牌</el-radio>
                <el-radio :label="2">线下场地</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item label="参与人数" prop="person">
            <el-input v-model.number="ruleForm.person"></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>
</template>

<script>
    export default {
        name: '',
        data() {
            //自定义验证规则
            var validatePerson = (rule, value, callback) => {
                if (value == '' || value == null) {
                    callback(new Error('请输入参与人数'));
                } else {
                    if (!Number.isInteger(value)) {
                        callback(new Error('参与人数只能是整数'));
                    }
                    callback();
                }
            }
            return {
                ruleForm: {},
                regionOption: [
                    {
                        label: '上海',
                        value: 0,
                    },
                    {
                        label: '北京',
                        value: 1,
                    },
                    {
                        label: '广州',
                        value: 2,
                    }
                ],
                rules: {
                    name: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    region: [
                        { required: true, message: '请选择活动区域', trigger: 'change' }
                    ],
                    date1: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    date2: [
                        { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                    ],
                    resource: [
                        { required: true, message: '请选择活动资源', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: '请填写活动形式', trigger: 'blur' }
                    ],
                    person: [
                        { required: true, validator: validatePerson, trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            //表单提交验证
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log('已通过验证')
                        console.log(this.ruleForm)
                    }
                });
            },
            //清空输入框
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped>
    .demo-ruleForm {
        width: 500px;
    }
</style>

以上的代码中包含了表单默认的验证和自定义的验证，model必须存在，它表示表单的内容存在哪个对象中。另外，对应el-form-item中，需要验证里面嵌套的输入框，外面使用required表示必填，里面再使用el-form-item和prop属性验证即可，上述的活动时间是个很好的例子。

2.验证扩展

除了上述的方法指定字段为必填项外，还可以根据条件来控制某个字段是否为必填字段。

<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="必填项" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="动态必填项" prop="name2" :rules="isNeed?rules.name2:[]">
            <el-input v-model="ruleForm.name2"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            <el-button @click="isNeed = true">必填</el-button>
            <el-button @click="isNeed = false">非必填</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: '',
        data() {
            return {
                isNeed: true,
                ruleForm: {},
                rules: {
                    name: [{
                        required: true,
                        message: '必填项不能为空',
                        trigger: 'blur'
                    }],
                    name2: [{
                        required: true,
                        message: '动态必填项不能为空',
                        trigger: 'blur'
                    }],
                }
            }
        },
        methods: {
            //表单提交验证
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log('已通过验证')
                        console.log(this.ruleForm)
                    }
                });
            },
        }
    }
</script>
<style>
</style>

 上述在需要动态验证的字段上加上rules属性，当条件为真时就进行指定的验证，条件为假时就是空数组即不进行验证。对于那种不同的条件必填项不同的情况非常的适用。

3.清除表单验证

需要补充一点，表单的验证也是可以清空的，它有自带的清除方法：

this.$nextTick(() =>{
      this.$refs['ruleForm'].clearValidate()
})

4.input设置readonly时验证

当把input设置为readonly时，通过其他的操作来给其赋值并验证时，有一个坑。

<template>
    <div style="width: 300px;">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="ruleForm.name" :readonly="true">
                    <el-button slot="append" @click="setValue">赋值</el-button>
                </el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model.number="ruleForm.age"></el-input>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
    </div>

</template>

<script>
    export default {
        name: '',
        data() {
            return {
                ruleForm: {},
                rules: {
                    name: { required: true, message: '请选择', trigger: ['blur', 'change'] },
                    age: { required: true, message: '请输入', trigger: 'blur' },
                }
            }
        },
        methods: {
            setValue() {
                this.ruleForm.name = "张三"
            },
            //表单提交验证
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log('已通过验证')
                        console.log(this.ruleForm)
                    }
                });
            },
            //清空输入框
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        components: {
        }
    }
</script>
<style>

</style>

上面的示例是点击赋值按钮给姓名赋值，若只点击赋值，无论点击多少次，文本框中都不会有值显示，也不会验证通过，但是当输入年龄后，姓名就显示出来并可以验证通过。原因是在给表单设置初始值时ruleForm对象是一个空对象，那么在表单验证时就不会通过。那么解决办法就是给ruleForm设置属性，而属性的值为null，如下：

ruleForm: {
    name: null
},

这种设置在很多情况下都会用到。