el-form前端表单校验步骤详细

el-form前端表单校验步骤详细

(1)，Form组件提供了表单验证的功能，只需要通过rules属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名即可。

<el-form :model="formData" :rules="rules" ref="form">
    <el-form-item label="活动名称" prop="name">
        <el-input v-model="formData.name" />
    </el-form-item>
</el-form>
<el-button @click="submit">提交</el-button>

(2)，data->return里面加上formData,在这里写上限定条件，通过rules属性传入约定的验证规则

<script>
    export default {
        return {
            name:''
        },
        const nameValidator = (rule,value,callback)=>{ 校验内容 },
        rules:{
            name:[
                { required: true(不填的时候提示不能为空), message: '请输入活动名称', trigger: 'blur'(失去焦点的时候触发) },
                // 第一条验证复合要求时，才会执行第二条
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
                // 第二条验证复合要求时，才会执行第三条
                { validator: nameValidator(限定条件), trigger:'blur' }
            ]
        }
    }
</script>

(3)，提交验证

methods:{
    submit(){
        this.$refs.form.validate(pass => {
            if(!pass) return;
            需要执行的代码
        })
    }
}

例子：

// 如果设备名称是铅笔，设备分类就为行政办公设备
<template>
    <el-form :model="formData" :rules="rules" ref="form">
        <el-form-item label="活动名称" prop="name">
            <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="设备分类" prop="category">
            <el-select v-model="formData.category" placeholder="请选择">
                <el-option v-for="d in $store.state.categoryList" :key="d.id" :label="d.name" :value="d.id" ></el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <el-button type="primary" @click="submit">提交</el-button>
</template>
<script>
    export default {
        data(){
            // 获取的数据是从vuex中获取的
            const nameValidator = (rule,value,callback)=>{
                // 只判断铅笔是办公用品，只是例子
                const { category } = this.formData;
                const cName = this.$store.getters.categoryObj[category].name;
                if(value === '铅笔' && category && category !== 'CATE9'){
                    callback(new Error(`铅笔不属于${cName}`))
                }else{
                    callback();
                }
            },
            const categoryValidator = (rule,value,callback) => {
                // 调用别的表单项的校验
                this.$refs.form.validateField('name');
                callback();
            },
            return {
                formData:{
                    name:'',
                }
            },
            rules:{
                name:[
                    { required: true, message: '请输入设备名称', trigger: 'blur' },
                    { validator: nameValidator, trigger:'blur' }
                ],
                category:[
                    { required: true, message: '请选择设备分类', trigger: 'change' },
                    { validator: categoryValidator, trigger:'change' }
                ]
            }
        },
        methods:{
            submit(){
                this.$refs.form.validate(pass => {
                    if(!pass) return;
                    this.submiting=true;
                    axios.post('/pre-edit',this.formData).then(res =>{
                        this.submiting=false;
                        if(!res.code){
                            this.$message.success('编辑成功');
                            this.$router.back();
                        }
                    })
                })
            }
        }
    }
</script>