vue elementui 表单验证async-validator的使用

引入表单组件

elementUI的表单组件，form 组件，使用输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。这个组件同时提供了对控件输入内容的校验功能。

整体表单区域，使用el-form 来包裹，每一行的输入组件，使用el-form-item 组件：

<el-form ref="form_demo" :model="form" label-width="120px">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
</el-form>

<script>
export default {
	data(){
		return {
			form:{
				name:'',// 姓名
			}
		}
	}
}
<script>

el-form 的几个属性，model是表单数据对象，每一项提价的数据，都放在这个对象里。然后注册ref特征。

引入校验

首先在整体表单中，声明校验规则对象

<el-form ref="form_demo" :model="form" label-width="120px" :rules="rules">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
</el-form>

然后，将校验规则，引入到具体表单项：
在el-form-item 中，增加prop属性，值为校验的字段值。该值属于表单域下（el-form 绑定的数据对象下），在本例子中，el-form-item 中的prop设为name，实际数据指的就是form.name 。

<el-form ref="form_demo" :model="form" label-width="120px" :rules="rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
</el-form>

最后针对每一项表单项中，需要校验的字段，制定校验规则：

rules: {
	// 校验
	name: [
  		{ required: true, message: "请输入活动名称", trigger: "blur" },
  		{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
	],
}

这样，在表单中，姓名输入框，就设置为必须输入，且输入的要求是长度3-5个字符。

rules 中的关键字说明

rules官方文档

type 字段

• string: Must be of type string. This is the default type.
• number: Must be of type number.
• boolean: Must be of type boolean.
• method: Must be of type function.
• regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.
• integer: Must be of type number and an integer.
• float: Must be of type number and a floating point number.
• array: Must be an array as determined by Array.isArray.
• object: Must be of type object and not Array.isArray.
• enum: Value must exist in the enum.
• date: Value must be valid as determined by Date
• url: Must be of type url.
• hex: Must be of type hex.
• email: Must be of type email.
• any: Can be any type.

message

错误时，提示的文字

trigger

出发的时机

• blur ： 失焦时校验，适用于输入框
• change ： 绑定值变化时校验，适用于下拉选等各种组件

判断校验结果：validate 方法

在添加了校验后，在合适的时机，会出发校验（例如失焦、内容改变的时候）。如果校验不通过，需要阻断向下的行为。在elementUI 中，提供了 validate 方法，来查询整个表单的校验结果（使用该方法时，需要通过持有的ref，来调用）。

validate : 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise

this.$refs['form'].validate(function(isPass,obj){// 是否校验成功，和不通过的字段
	if(isPass){// 校验成功
		// 成功后的操作，例如提交
	}else{ // 校验失败
		// 校验失败后的操作
		// 例如，在一连串表单中，弹出第一个校验失败的内容，然后提示规则中的message字段
		for(let key in msg){
            alert(msg[key][0].message);
            return false
        }
	}
})

完整的例子

<template>
  <div class="home">
    <el-form ref="form" :model="form" label-width="120px" :rules="rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="性别">
        <el-radio-group v-model="form.sex">
          <el-radio :label="0">女</el-radio>
          <el-radio :label="1">男</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="菜品" prop="checkList">
        <el-checkbox-group v-model="form.checkList">
          <el-checkbox label="烧鸡" name="checkList"></el-checkbox>
          <el-checkbox label="肘子" name="checkList"></el-checkbox>
          <el-checkbox label="火锅" name="checkList"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="时间" prop="name">
        <el-date-picker v-model="form.days" type="date" placeholder="选择日期"></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "home",
  components: {},
  data() {
    return {
      form: {
        name: "",
        sex: 0,
        checkList: [],
        days: ""
      },
      rules: {
        // 校验
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        checkList: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {
    showThis() {
      console.log(this);
    },
    submit() {
      this.$refs["form"].validate((valid, msg) => {
        if (valid) {
          console.log("submit");
        } else {
          console.log("error submit!!");
          console.log(msg);
          for (let key in msg) {
            alert(msg[key][0].message);
            return false;
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.home {
  width: 450px;
  margin: auto;
}
</style>

运行后的示意图：