element-ui 表单校验 - 优化

element-ui 表单校验 - 优化

在表单比较少的项目中, 一直都是按照官网的写法:

<el-form-item label="主要停车场步行时间:" prop="walking_time" :rules="[{ required: true, message: '数据不能为空', trigger: 'blur' },{ type: 'number', message: '输入必须为正整数', min: 0 }]">

  <el-input v-model="ruleForm.walking_time" class="width600" placeholder="请输入步行时间">el-input>

el-form-item>
复制代码

但是，在表单比较多的项目中，rules 校验规则在表单中都是 重复性 工作。可以试着将它抽取出来。

• 新建一个文件存放校验规则。 rules.js

const required = true
const trigger = ['blur', 'change']

export const formValidate = {
  // 文本框必填校验
  textRequired (message = '请填写') {
    return {
      required,
      message,
      trigger
    },

  // 必须为数字得校验
  isNumberRule (message = '数字需为0以上', min = 0) {
    return {
      type: 'number',
      message,
      min,
      trigger
    }
  }
  ......
  ......
  ......
}

复制代码

• 直接用。 eg: test.vue

import formValidate form '@/rules.js'
export default {
  data () {
    return {
      formValidate
    }
  }
}

"主要停车场步行时间:" prop="walking_time" :rules="[formValidate.textRequired('请输入步行时间'), formValidate.isNumberRule()]">

   <el-input v-model="ruleForm.walking_time" class="width600" placeholder="请输入步行时间">el-input>

el-form-item>
复制代码

---

虽然只是小小的换个写法，但是对于表单比较多的项目，还是能少些一下代码的，并且看起来也简洁了一点点。

转载于:https://juejin.im/post/5c137c5f6fb9a049dd802c48