Vue校验规则的语法糖 rule

前言

表单校验不想那么麻烦就可以这样

正文

 rules: {
        username: [
          {
            pattern: /^[\x7f-\xffA-Za-z0-9_]+$/,
            message: "不允许中文",
            trigger: "blur",
          },
          { required: true, message: "请填写用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不可为空", trigger: "blur" },
        ],
      },

当然了,校验规则如果比较麻烦还是需要写成函数,比如我需要检测一下数据库中有没有重复的name所对应的用户,就必须把校验规则单独摘出来👇

 rule: {
        name: [
          {
            required: true,
            validator: checkFoodname,
            trigger: "blur",
          },
        ],
     }

checkFoodname👇

data(){
		let checkFoodname = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请填写菜品名称"));
      } 
      this.$http.post('/food/hasFood',this.$qs.stringify({
        name:value
      })).then(response=>{
        if(response.data.code ==200){
          return callback(new Error("已有有相同菜品"));
        }
        return callback()
      })
    }
	return{

	}
}

总结

这两种校验规则的方式你学会了吗,喜欢记得点赞加关注哦~