基本步骤-共三步

1. 定义验证规则。data()中按格式定义规则

2. 在模板上做属性配置来应用规则（三个配置）

   给表单设置 rules 属性传入验证规则

   给表单设置model属性传入表单数据

   给表单项（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名

3. 手动兜底验证

 

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

在 data 中,补充定义规则。

格式：

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

 示例

  { required: true, message: '请输入验证码', trigger: 'blur' },
  { pattern: /^\d{6}$/, message: '请输入合法的验证码', trigger: 'blur' },
  { min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' }

实操代码

data () {
    return {
      // 表单验证规则，整体是一个对象
      // 键：要验证的字段, 值：是一个数组，每一项就是一条规则
      
      rules: {
        // 字段名：mobile就表示要验证的 属性
        // 值: 是一个数组。数组中的每一项表示一条规则。
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ]
      }
    }
  },

注意：

• rules中的属性名与表单数据项中的属性名必须是一致的

步骤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>
  <el-form-item label="密码" prop="code">
    <el-input v-model="form.code"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button @click="onCancel">取消</el-button>
  </el-form-item>
</el-form>

验收效果

我们做到这一步时，当用户输入的内容不符合表单规则要求时，并且某个输入框失焦时，它会给出相应的提示，当我们输入的内容符合要求时，错误提示会自动消失。

 

步骤3-手动兜底验证

格式

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

说明：

• validate 方法是表单组件自带的，用来对表单内容进行检验。

• 需要在模板中添加对表单组件的引用：ref 的作用主要用来获取表单组件手动触发验证

代码-模板

<el-form label-width="80px" 
   ref="form"
   :model="form"
   :rules="rules">

添加ref来引用el-form组件。

代码

在做提交时进行手动兜底验证，如果通过了验证

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

 

小结

步骤

1. 定义验证规则(按element-ui的要求来)

2. 配置模板，应用规则

   给表单设置 rules 属性传入验证规

   给表单设置model属性传入表单数据

   给表单中的元素（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名

3. 手动兜底验证

 vue中的 ref 和 $refs的区别转载https://www.cnblogs.com/xumqfaith/p/7743387.html