一招教你学会element-ui的表单验证

ElementUI表单验证

ElementUI的表单验证借助了async-validator，该模块内置了很多原生类型的验证，如： string, number等相关类型

给el-form绑定model属性

<template>
  <el-form :model="formData"></el-form>
</template>

<script>
  export default {
    data () {
      return {
        formData: {
          key: value,
          key2: value,
          key3: value
        }
      }
    }
  }

</script>

给每一个el-form-item添加prop属性

<template>
  <el-form :model="formData">
    <el-form-item prop="key">
    </el-form-item>

    <el-form-item prop="key2">
    </el-form-item>

    <el-form-item prop="key3">
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    data () {
      return {
        formData: {
          key: value,
          key2: value,
          key3: value
        }
      }
    }
  }

</script>

定义验证规则

在data中定义规则

<script>
  export default {
    data () {
      return {
        formData: {
          key: value,
          key2: value,
          key3: value
        },

        formRules: {
          // 这里的属性和formData中的属性一一对象
          key: [
            // 数组中填写规则
            {required: true, message: '验证不通过时提示的信息', trigger: '触发条件，可选： blur，change'},
            // 如果有多条，则继续写对象
            {type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur'},
            {type: 'number', meesage: '请输入数字', trigger: 'blur'}

            // 自定义验证 见下放自定规则详细定义方法
            {validator: 函数, trigger: 'blur'}
          ],

          key2: [],

          key3: []
        }
      }
    }
  }
</script>

给el-form上添加rules属性，是我们对应的规则

<template>
  <el-form :model="formData" :rules="formRules">
    <el-form-item prop="key">
    </el-form-item>

    <el-form-item prop="key2">
    </el-form-item>

    <el-form-item prop="key3">
    </el-form-item>
  </el-form>
</template>

!!!注意，添加该属性后可以进行验证，但是提交数据时不会根据验证结果进行对应操作，所以我们需要在提交数据时，进行判断

提交数据时进行判断

利用 this.$refs.form上的ref属性值.validate((status) => {})

<template>
  <el-form ref="form" :model="formData" :rules="formRules">
    <el-form-item prop="key">
    </el-form-item>

    <el-form-item prop="key2">
    </el-form-item>

    <el-form-item prop="key3">
    </el-form-item>

    <el-form-item prop="key3">
      <el-button @click="send">按钮</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    data () {
      return {
        ...,....
      }
    },

    methods: {
      send () {
        this.$refs.form.validate((status) => {
          if (status) {
            // true 表示通过验证
            // 进行相关数据的请求
          }
        })
      }
    }
  }
</script>

自定义表单验证

自定义表单验证的对象写法

{
  rules: {
    key: [
      {validator: 验证函数, trigger: 'blue'}
    ]
  }
}

验证函数规则

我们可以把相关的验证函数，单独封装

function keyValidator (rule, value, cb) {
  // rule 表示当前的验证规则对象
  // value 表示表单元素中输入的内容
  // cb 是一个回调函数，决定了报错还是正常通过

  if (验证条件) {
    // 为true则表示验证通过， 通过则直接调用cb()
    cb()
  } else {
    // 验证没有通过，则调用cb(new Error('提示信息'))
    cb(new Error("错误信息提示"))
  }
}