VUE el-form组件不绑定model时进行校验

在el-form中如果要使用:rules规则校验时,需要在el-form标签绑定 :model

如何不绑定model而进行校验字段:

        思路:

        1.假设规则为非空判断

        2.获取该字段,进行非空判断,记录该字段是否校验完成,添加到校验标识中

        3.表单或数据提交时,判断校验标识

        required 红星星  :error 提示项

简单演示

<el-form-item label="name" required :error="customError(this.name,'name')"><el-input v-model="name"></el-input>
</el-form-item>

    data() {return {name: '',validateField: [],},methods: {customError(obj,filedName){var i = this.validateField.indexOf(filedName);if (!obj.trim()) {if(i == -1){this.validateField.push(filedName);}return "请填写必填项！"} else {if(i > -1){this.validateField.splice(i,1);}return '';}},checkSummit(){if(this.validateField.length == 0){//submit}else{this.$message({message: "请填写必填项！",type: "error",});}}}

也可加入不同规则进行校验~~!