[JavaScript知识库]Vue 自定义数据校验

项目常用的数据校验可以抽取为一个组件，这然既方便统一维护，也增加页面的便利性和扩展性，而对于复杂或特殊校验可单独处理。

首先创建自定义校验类src/utils/customValidate.js

/**
 * 自定义数据校验
 * */
const Validation = {};
Validation.install = function (Vue, options) {
  /**
   * 参数 item校验规则对象{rule:'required|phone',msg:'自定义提示信息'}
   * rule   校验规划字典key,多个以|分隔
   * maxLength  字符串的最大长度
   * min 和 max 必须同时给 min < max  
   * regexp 自定义正则
   * msg:不传取设置message,若传显示自定义的提示信息
   * */

  Vue.prototype.$ctjRules = function (item) {
    const dic = {
      required: { required: true, message: item.msg ?? '该输入项为必填项!', trigger: 'blur' },
      email: { type: 'email', message: item.msg ?? '请输入正确的邮箱地址', trigger: 'blur' },
      phone: { pattern: /^1[34578]\d{9}$/, message: item.msg ?? '请输入正确的手机号码', trigger: 'blur' },
      idCard: { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: item.msg ?? '请输入15或者18位身份证号码', trigger: 'blur' },
      num: { pattern: /^[1-9]\d*$/, message: item.msg ?? '请输入非0的整数', trigger: 'blur' },
      ip: { pattern: /^((([01]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))[.]){3}(([0-1]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))$/, message: '请输入正确的ip地址', trigger: 'blur' },
      mac: { pattern: /^[A-F0-9]{2}(-[A-F0-9]{2}){5}$|^[A-F0-9]{2}(:[A-F0-9]{2}){5}$/, message: '请输入正确的mac地址', trigger: 'blur' },
      pwd: { pattern: /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{8,18}$/, message: '请输入8-18位，大写字母、小写字母、数字、特殊字符中的2种', trigger: 'blur' }
    }

    let rules = [];
    if (item.rule) {
      const arr = item.rule.split('|')
      arr.map(x => {
        rules.push(dic[x])
      })
    }

    if (item.maxLength) {
      rules.push({ min: 1, max: item.maxLength, message: '最多输入' + item.maxLength + '个字符!', trigger: 'blur' })
    }
    if (item.min && item.max) {
      rules.push({ min: item.min, max: item.max, message: '字符长度在' + item.min + '至' + item.max + '之间!', trigger: 'blur' })
    }
    if (item.regexp) {
      rules.push({ pattern: item.regexp, message: item.msg, trigger: 'blur' });
    }
    return rules;
  }

};

module.exports = Validation;

在main.js中进行注册

//表单验证插件
import Validation from './utils/customValidate.js';
Vue.use(Validation);

在组件中使用示例

<template>
  <div class="main">
    <el-row>
      <el-col :span="12" :offset="6">
        <el-form :model="ruleForm" ref="ruleForm" :label-position="position">
          <el-form-item label="必填默认提示required|phone" prop="phone" :rules="$rules({rule:'required|phone'})">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="必填自定义提示required|num" prop="name" :rules="$rules({rule:'required|num',msg:'请输入数字'})">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="正则表达式" prop="regexp" :rules="$rules({rule:'required',regexp:/^[^\u4e00-\u9fa5\s]{6,10}$/,msg:'6-10位字符'})">
            <el-input v-model="ruleForm.regexp"></el-input>
          </el-form-item>
          <el-form-item label="身份证" prop="card" :rules="$rules({rule:'required|idCard'})">
            <el-input v-model="ruleForm.card"></el-input>
          </el-form-item>
          <el-form-item label="maxlength" prop="maxlength" :rules="$rules({rule:'required',maxLength:8})">
            <el-input v-model="ruleForm.maxlength"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('ruleForm')">提交</el-button>
            <el-button @click="resetForm()">取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>   

  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {     
    }
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('succcess')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs['ruleForm'].resetFields()
    },    
  },
}
</script>