element-ui中表单的多种校验方式灵活使用方法

业务开发中,只要遇到提交类的表单,都不可避免的必须使用表单校验,而对于不同的业务场景,一般的校验方式可能就满足不了,这时就需要用其他的方式实现校验,这里基于element-ui整理归纳出多种场景下的表达校验方法。可根据需要选择合适的方法进行校验。

在element-ui中,对于在模板中的:rules中直接写校验和在data里面写校验的方式是最常用也是最简单的方式,这里不进行讲述。下面将讲述一些特殊的用法。

一、在methods中定义校验方法

直接在模板中的rules里调用。

优点:方便灵活,可以多处共用,动态传参和参数扩展,可以用于处理循环类动态扩展的组件

缺点:不太适用于公共校验的封装。

核心代码格式如下:

//模板代码:
 <el-input 
    :rules="{ 
      validator: (rule, value, callback)=>validateFormItem(rule, value, callback,msg,info), 
      trigger: 'change' 
    }"
></el-input>
// methods中的方法:
methods: {
  validateFormItem (rule, value, callback,msg,info) {
    if(info/*满足条件*/){
      callback()
    }else{
      callback("不满足条件")
    }
  }
}

二、模板中:rules里内嵌方法校验

优点:直接在模板的rules里面内嵌方法,代码更直观,可以用于处理循环类动态扩展的组件。

缺点:条件处理过多时代码过于累赘,无法共用。

核心代码格式如下:

<el-input 
:rules="[
    { required: true, message: '不可为空', trigger: 'blur' },
    {
      validator: (rule, value,callback) => {
        if (!false) {
          callback('不合法');
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }]"
></el-input>

三、混入法

在mixins里定义好校验方法,在组件中直接引进来使用,可以在模板中调用,也可以在脚本data里调用。

优点:方便灵活,可以多处共用,动态传参和参数扩展。可以用于封装项目中共用的校验方法。

缺点:当组件是动态循环时,不太适用于data中调用的方式,多层校验分离显得代码有冗余。

注:也可以直接写到当前vue组件文件中,使用混入目的是多处使用时可以共用。

核心代码如下:

//1  mixins文件:
export default {
  data() {
    return {
      //名称类:包含中文、字母、数字和下换线
      specialCheck: (required = false, message) => {
        return {
          required: required,
          pattern: /^[\u4E00-\u9FA5A-Za-z0-9-_/,.。]+$/,
          message: message || "内容中不能包含特殊字符",
          trigger: "change"
        };
      }
    };
  }
};
// 2 在要使用的vue组件中引入和混入
import verification from "@/verification";
 mixins: [verification]
// 使用方式一:模板中使用
<el-input
 :rules="[
  {
    required: true,
      message: '请输入名称',
        trigger: 'change'
  },
  specialCheck(true)  // 这里直接使用,可以传参
]"></el-input>
//使用方式二: 脚本data中调用
export default {
  data () {
    return {
      rulesForm: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "change"
          },
          { max: 50, message: "长度不能超过 50 个字符" },
          verification.data().specialCheck(true),//这里调用mixins中的校验方法
          { validator: validateFormItem, trigger: "blur" }//这里调用methods中的方法
        ]
      }
    }
  }
}

以上是工作中总结的特殊场景下的校验方法,各有优缺点,可以根据实际业务场景选择合适的实现方式。

原创文章,作者:Ferrycoln,如若转载,请注明出处:https://ms200.cn/archives/1826

发表评论

邮箱地址不会被公开。 必填项已用*标注