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
    }
  }
}

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

   <el-input v-model="ruleForm.walking_time" class="width600" placeholder="请输入步行时间"></el-input> </el-form-item> 复制代码

---

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