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>

运行后的示意图:

你可能感兴趣的:(前端)