elementUI中Form表单组件-表单验证

elementUI中Form表单组件-表单验证

基本步骤-共三步

1.定义验证规则.data()中按格式定义规则
2.在模板上做属性配置(3个配置)

• 给表单设置 rules 属性传入验证规则
• 给表单设置 model 属性传入表单数据
• 给表单项 (Form-item) 设置 prop 属性,其值为设置为需要校验的字段名
  3.手动兜底验证

步骤1-定义表单验证规则

data() {
  return {
    rules: {
        // 字段名1：表示要验证的属性
        // 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。
        //     数组中的多条规则会按顺序进行
        字段名1: [
          { 验证规则1 },
          { 验证规则2 },
        ],
        字段名2: [
          { 验证规则1 },
          { 验证规则2 },
        ], 
		}
  }
}

步骤2-模板中的配置

内容 :

1. 给el-form组件绑定model为表单数据对象
2. 给el-form组件绑定rules属性配置验证规则
3. 给需要验证的表单项 el-form-item绑定 prop 属性,注意: prop属性需要指定表单对象中的数据名称
   代码 :

<el-form label-width="80px" :model="form" :rules="rules">
  <el-form-item label="手机号" prop="mobile">
    <el-input v-model="form.mobile"></el-input>
  </el-form-item>

步骤3-手动兜底验证

格式 :

element-ui的表单组件.validate(valid => {
	if(valid) {
	   // 通过了验证
	} else {
		 // 验证失败
	}
})

说明 :

• validate方法是表单组件自带的,用来对表单内容进行检验
• 需要在模板中添加对表单组件的引用 : ref的作用主要是来获取表单组件手动触发验证

代码模板 :
添加ref来引用el-form组件,在做提交时进行手动兜底验证，

submit () {
  this.$refs.form.validate(valid => {
    // valid 就是表单验证的结果，如果是true，表示通过了
    // console.log(valid)
    if (valid) {
      // 通过了验证，你可以做后续动作了
      this.doLogin()
    }
  })
}