el-form表单空格校验，提交校验

el-form表单空格校验，提交校验校验空格

#实现的效果图

template里面的代码

    <el-dialog title="新增用户"  :visible.sync="dialogVisibleAdd" width="30%" @close="handleClose">
            <el-form class="myFormStyle" label-width="100px" :model="form" :rules="rule" ref="FormRef">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-select placeholder="请输入性别" v-model="form.sex">
                        <el-option label="男" value="0">
                        </el-option>
                        <el-option label="女" value="1">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出生日期" prop="birthDate">
                    <el-date-picker v-model="form.birthDate" type="date" placeholder="选择日期" style="width:400px">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.addr" placeholder="地址"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose" size="mini">取 消</el-button>
                <el-button type="primary" @click="makeSure()" size="mini"> 确 定</el-button>
            </span>
        </el-dialog>
JavaScript里面的代码

export default {
name: ‘User’,
data() {
return {
dialogVisibleAdd: false,
form: {
name: ‘’,
sex: ‘’,
age: ‘’,
addr: ‘’,
birthDate: ‘’
},
tableData: [{ name: ‘张三’, age: 15, sex: ‘男’, birthDate: ‘2022-02-08’, addr: “成都市锦江区” }],
rule: {
name: [{
required: true,
validator: (rule,value,callback) => {
if(!value){
callback(new Error(“请输入姓名”))
}
else if(String.trim(value) == “”){
callback(new Error(“姓名不能为空”))
}
else{callback()}
},
trigger: blur
}],
sex: [{
required: true,
message: ‘请输入性别’,
trigger: blur
}],
birthDate: [{
required: true,
message: ‘请输入出生日期’,
trigger: blur
}]
}

    }

},
methods: {
    makeSure() {     
        this.$refs["FormRef"].validate((valid) => {
      if (valid) {
        alert('submit!');
      } else {
        console.log('error submit!!');
        return false;
      }
    }); 
    },
    handleClose() {
        this.dialogVisibleAdd = false
        if(this.$refs.FormRef){
            this.$refs.FormRef.clearValidate()
        }
    }
}

}