vue + element-ui 表单校验通用组件（封装公用方法）

普通校验方法已经足够，但是项目涉及：需要规避正则特殊字符，特建立一个组件可以直接调用

参考链接：https://www.cnblogs.com/chichuan/p/13445196.html

1.在VUE中新建通用的JS，封装公用校验方法，目录：src/utils/formCheck.js

 export default内可以分类封装验证，封装不同表单的验证方法

// 正则特殊字符 校验
const validateSpecialChar = (rule, value, callback) => {
  // 所有.* 换成%
  let reg1 = new RegExp('\\.\\*', 'g')// g代表全部
  let newMsg = value.replace(reg1, '%')
  let reg = new RegExp('[\\\\:?.*\\^+<>|{}]')
  if (reg.test(newMsg)) {
    callback(new Error('正则表达式不能包含\\ : ? . * ^ + < > | { }等单个特殊字符'))
  } else {
    callback()
  }
}
export default {
  common: {
    // ---------------------公共验证方法，可多个
    specialChar: [{
      required: true,
      message: '参数不能为空'
    },
    {
      validator: validateSpecialChar,
      trigger: 'blur'
    }
    ],
    校验方法2：[略],
    校验方法3：[略]
  },
  handle: {
    // ---------------------处理表单的验证方法
    operResult: [{// 处理结果 （例子可自由根据表单定义）
      required: true,
      message: '请选择处理结果'
    }],
    opinion: [{// 处理结果描述 （例子可自由根据表单定义）
      required: true,
      message: '请填写处理结果描述'
    }]
  }
}

 2.全局挂载 main.js

1 import currencyRules from './utils/formCheck.js'
2 
3 // 全局方法挂载
4 Vue.prototype.$rules = currencyRules

3.form标签中调用

<el-form-item label="白名单违禁词" prop="word" :rules="$rules.common.specialChar">
  <el-input v-model="dataForm.word" placeholder="正则匹配，已自动增加.*，填写违禁词即可" style="width:700px"></el-input>
</el-form-item>

 以上就可以解决，可以同时使用<el-form>中校验规则:rules,也可以单独调用公用方法specialChar

4.其他参考

 1）.表单标签加  :rules="$rules.handle"

<el-form
      ref="form"
      :model="form"
      label-width="150px"
      :rules="$rules.handle"
      style="padding:0 50px 0 20px;"
    >
      <div class="wrap">
        <el-form-item label="处理结果" prop="operResult">
          <el-select
            v-model="form.operResult"
            placeholder="请选择处理结果"
            clearable
            size="small"
            style="width:50%"
          >
            <el-option
              v-for="item in handle_result"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理结果描述" prop="opinion">
          <el-input type="textarea" v-model="form.opinion" maxlength="320" show-word-limit></el-input>
        </el-form-item>
      </div>
    </el-form>

 2）.单独使用 :rules="$rules.handle.opinion"

 
<el-form-item label="处理结果描述" prop="opinion" :rules="$rules.handle.opinion">
       <el-input type="textarea" v-model="form.opinion" maxlength="320" show-word-limit>    </el-input>
</el-form-item>