VUE+element-ui使用rules做form表单的校验

学海无涯，旅“途”漫漫，“途”中小记，如有错误，敬请指出，在此拜谢！

前言

最为一个java后台人员，最近在学习编写VUE。发现很多功能的输入框都需要校验，百度了一下vue和element-ui，可以使用rules进行校验。所以记录此次学习过程，供小伙伴们使用。

步骤

1.配置el-form

在你的form表单中增加rules的配置，如

<el-form ref="addParam" :rules="rules" :model="addParam" label-width="120px">
	...
</el-form>

2.配置el-form-item

在对应的字段增加prop属性，如（注意此处prop属性要跟步骤3对应）

<el-form ref="addParam" :rules="rules" :model="addParam" label-width="120px">
	 <el-form-item label="此处为金额" prop="hourPrice">
     	<el-input v-model="addParam.price" placeholder="请输入"></el-input>
     </el-form-item>
</el-form>

3.配置规则

在export default的data中增加rules的规则配置

export default {
    ...
    data() {
        return {
            ...
            rules: {
                price: [{ required: true, message: '不能为空', trigger: 'blur' }]
            },
            ...
        }
    },

4.提交时增加方法

通过上述方法配置，如果鼠标点击对应input框，但是没有填写，光标移除后就会出现下图样式

不过如果只按照上面配，在保存的时候，是不会有强行验证的，所以还需要加个验证

   saveAdd() {
       this.$refs['addParam'].validate(valid => {//此处为验证，refs里面为form表单的ref定义名称
           if (!valid) {//如果验证不通过，则不走下面的方法内容
               return false;
           }
       });
       ....
   }

通过以上四步，则可以完成表单的校验功能

5.其他

如果element-ui的验证不满足自己的校验方式（比如要验证电话号码，验证是否为整数等），则可以通过下面方法处理
（1）增加一个js，添加自定义的验证js，方法可参考

https://www.cnblogs.com/lieone/p/11856330.html

比如引入方法validateNumber

/**
 * 纯数字校验
 * @param rule
 * @param value
 * @param callback
 */
export function validateNumber (rule, value, callback) {
  let numberReg = /^\d+$|^\d+[.]?\d+$/
  if (value !== '') {
    if (!numberReg.test(value)) {
      callback(new Error('请输入数字'))
    } else {
      callback()
    }
  } else {
    callback(new Error('请输入值'))
  }
}

（2）vue页面引入此js的具体方法，如

import {validateNumber} from '../../utils/validate'

（3）在方法3的配置规则中，修改为如下即可

price: [{ required: true, message: '不能为空', trigger: 'blur' },{validator:validateNumber,trigger:'blur'}],