Form表单组件-表单验证(element-ui))-一一网

基本步骤-分三步
1.定义验证规则,data()中按格式定义规则
2.在模板上做属性配置来应用规则(三个配置)
给表单设置rules属性来传入验证规则,给表单设置model属性传入表单数据,给表单项(Form-item)设置prop属性(prop属性需要指定表单对象中的数据名称),
其值为设置为需校验的字段名
3.手动兜底验证

步骤1-定义表单验证规则
在data中,补充定义规则.

data(){
  return {
    rules: {
       //字段名1: 表示要验证的属性
       // 值: 表示验证规则列表。它是一个数组,数组中的每一项表示一条规则。
       // 数组中的多条规则会按顺序进行
       字段名1: [
         {验证规则1}, //{required:true, message: '请输入验证码',trigger:'blur'}
         {验证规则2}, //{pattern: /^\d{6}$/,message: '请输入合法的验证码',trigger:'blur'}
         ],
        字段名2: [
        {验证规则1},
        {验证规则2},
        ]
        }
       }
      }
复制代码

  // rules中的属性名与表单数据项中的属性名必须是一致的。
复制代码

步骤2-模板中的配置

<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的作用主要用来获取表单组件手动触发验证
在做提交时进行手动兜底验证

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

复制代码