Vue表单自定义检验

最新推荐文章于 2024-05-20 20:41:16 发布

初秋-.-

最新推荐文章于 2024-05-20 20:41:16 发布

阅读量5.1k

点赞数 2

文章标签： vue vue.js bootstrap

本文链接：https://blog.csdn.net/weixin_44184780/article/details/123793582

版权

Vue表单自定义检验

之前写过一篇多表单校验再来一篇自定义校验，直接上干货

表单校验三要素

model:表单数据对象
rules:表单验证规则
prop:表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 string,传入 Form 组件的 model 中的字段

validator

是element-ui上对于form提供的属性，官网是这样解释的
任一表单项被校验后触发被校验的表单项 prop 值，校验是否通过，错误消息（如果存在）
validator会传入 rule,value,callback

代码块

     <el-form
                :inline="true"
                :model="diaForm"
                :rules="diaFormRules"
                ref="diaForm"
            >
               <el-form-item
                    label="命名空间:"
                    :label-width="labWidth"
                    prop="nameSpace"
                >
                    <el-input v-model="diaForm.nameSpace"
                    ></el-input>
                </el-form-item>
      </el-form>
      export default {
			data(){
			return{
			diaForm：{
			nameSpace
			},
			diaFormRules:{
			    nameSpace: [
                    {
                        required: true,
                        message: "请输入命名空间",
                        trigger: "blur",
                    },
                    {
                        validator:(rule,value,callback) =>{
                            var bol = false;
                            if(this.tableData.length != 0){
                                if(this.diaTitle == "新建"){
                                for(var i = 0;i<this.tableData.length;i++){
                                    if(this.tableData[i].Name.toLowerCase() == value.toLowerCase()){
                                        bol =true;
                                        break;
                                    }
                                }
                                }
                            }
                            if(bol == true){
                                callback(new Error("该命名空间已存在"));
                            }else{
                                callback();
                            }
                        },
                        trigger:"blur",
                    }
                ],
			}
			}
}
}