【原】vue结合element_ui，统一验证管理

数据验证，全局方法使用，方便后期统一管理维护

创建validate.js文件

export default {
    install(Vue) {
        var that = this
        // 1. 添加全局方法或属性
        // ue.global = this
        // 2. 添加全局资源
        // 3. 注入组件
        Vue.mixin({
            created() {
                this.global = that
            }
        });
        //必填项
        Vue.prototype.$empty = (rule, result, callback) => {
          
            if (result == null || result == "" || result == 'undefined') {
                return callback(new Error('不能为空！'));
            }
            return callback();
        };
      }
}

main.js引入

import valid from '@/utils/validate'

Vue.use(valid)

vue表单

<el-form :model="candidate" ref="userForm" :rules="rules">
        <el-form-item label="人员姓名" prop="userName" >
                            <el-input v-model="form.userName" autocomplete="off"></el-input>
                        </el-form-item>
 </el-form>

 data() {
        return {
          form:{
           userName:''
          },
           rules: {
                userName: [
                    {validator: this.$empty, trigger: 'blur', required: true},
                ],
        }
 }

总结

数据验证js文件，对一些正则表达式统一维护，删除重复性的校验代码，在项目开发过程中，是比较常用的方法。