vue -element ui 自定义验证规则，封装在公共的文件里

1.首先 新建一个rules.js 的文件 编写校验规则  我新建在api 文件下。

/**
 * @author 王宇
 * @date 2019/5/24
 * @Description: 校验公共方法
*/
// 账号
let codeReg = /^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/
// 电话
let phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/

// 必须为数字
let numberReg = /^\d+$|^\d+[.]?\d+$/

// 密码
let passwordReg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/

// 联系人
let contactsReg = /^[\u0391-\uFFE5A-Za-z]+$/

let regId = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/

let emailReg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/

let FormValidate = (function () {
  function FormValidate () {}
  // From表单验证规则  可用于公用的校验部分
  FormValidate.Form = function () {
    return {
      // 账号的验证规则
      validateCode (rule, value, callback) {
        if (!value) {
          return callback(new Error('请输入账号'))
        }
        if (!codeReg.test(value)) {
          callback(new Error('账号必须为6-20位字母和数字组合'))
        } else {
          callback()
        }
      },

      // 只能数字的验证
      validateNumber (rule, value, callback) {
        if (value !== '') {
          if (!numberReg.test(value)) {
            callback(new Error('员工数量必须为数字'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      },

      // 密码的验证
      validatePsdReg (rule, value, callback) {
        if (!value) {
          return callback(new Error('请输入密码'))
        }
        if (!passwordReg.test(value)) {
          callback(new Error('请输入6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种'))
        } else {
          callback()
        }
      },

      // 联系人
      validateContacts (rule, value, callback) {
        if (!value) {
          return callback(new Error('请输入联系人'))
        }
        if (!contactsReg.test(value)) {
          callback(new Error('联系人不可输入特殊字符'))
        } else {
          callback()
        }
      },

      // 邮箱的验证规则
      validateEmail (rule, value, callback) {
        if (value !== '') {
          if (!emailReg.test(value)) {
            callback(new Error('邮箱格式不正确'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      },

      // 电话号码的验证
      validatePhone (rule, value, callback) {
        if (!value) {
          return callback(new Error('请输入手机号码'))
        }
        if (!phoneReg.test(value)) {
          callback(new Error('手机格式不正确'))
        } else {
          callback()
        }
      },

      // 身份证的验证规则
      ID (rule, value, callback) {
        if (!value) {
          return callback(new Error('身份证不能为空'))
        }
        if (!regId.test(value)) {
          callback(new Error('请输入正确的二代身份证号码'))
        } else {
          callback()
        }
      }
    }
  }

  return FormValidate
}())

exports.FormValidate = FormValidate

 

 

2.在组件中引入 

import rules from "@/api/rules.js"

在js里

data () {
   
    return {
      // 提交的参数
      form: {
        companyName: '',
        number: '',
        code: '',
        password: '',
        rePassword: '',
        contacts: '', // 联系人
        phone: '',
        email: '',
        imgCode: ''
      },
      getImgCodeResults: '',
      keyResults: '',
      // 校验规则
      rules: {
        companyName: [
          {required: true, message: '请输入公司名称', trigger: 'blur'},
          // 可以设置双重验证标准
          {max: 30, message: '公司名称不可超过30个字符11'}
        ],
        number: [
          {required: false, validator: rules.FormValidate.Form().validateNumber, trigger: 'change'},
          {max: 10, message: '员工数量不可超过10亿'}
        ],
        code: [{required: true, validator: rules.FormValidate.Form().validateCode, rigger: 'blur'}],
        password: [{required: true, validator: rules.FormValidate.Form().validatePsdReg, rigger: 'blur'}],
      
        contacts: [
          {required: true, validator: rules.FormValidate.Form().validateContacts, rigger: 'blue'},
          {max: 10, message: '联系人不可超过10个字符'}
        ],
        phone: [{required: true, validator: rules.FormValidate.Form().validatePhone, trigger: 'blur'}],
        email: [{required: false, validator: rules.FormValidate.Form().validateEmail, trigger: 'change'}],
        imgCode: [{required: true, message: '请输入验证码', rigger: 'blue'}]
      }
    }
  },

3.表单部分

<el-form ref="form" :rules="rules" :model="form">
                <el-form-item prop="companyName">
                  <i></i>
                  <el-input clearable v-model.trim="form.companyName" placeholder="请输入公司名称" auto-complete="true"></el-input>
                </el-form-item>
                <el-form-item prop="number">
                  <el-input clearable v-model="form.number" placeholder="请输入员工数量" auto-complete="true"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                  <i></i>
                  <el-input clearable v-model.trim="form.code" placeholder="请输入账号" auto-complete="true"></el-input>
                  <!--<p class="tip">6-20位字母或字母与数字组合</p>-->
                </el-form-item>

                <el-form-item prop="password">
                  <i></i>
                  <el-input clearable type="password" v-model.trim="form.password" placeholder="请输入密码" auto-complete="true"></el-input>
                  <!--<p class="tip">6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种</p>-->
                </el-form-item>

                <el-form-item prop="rePassword">
                  <i></i>
                  <el-input clearable type="password" v-model.trim="form.rePassword" placeholder="请输入确认密码" auto-complete="true"></el-input>
                </el-form-item>
                <el-form-item prop="contacts">
                  <i></i>
                  <el-input clearable v-model="form.contacts" placeholder="请输入联系人" auto-complete="true"></el-input>
                </el-form-item>
                <el-form-item  prop="phone">
                  <i></i>
                  <el-input clearable v-model="form.phone" placeholder="请输入联系人手机号码" auto-complete="true"></el-input>
                </el-form-item>
                <el-form-item  prop="email">
                  <el-input clearable v-model.trim="form.email" placeholder="请输入邮箱" auto-complete="true"></el-input>
                </el-form-item>
                <el-form-item  prop="imgCode">
                  <i></i>
                  <el-input v-model="form.imgCode" placeholder="请输入验证码" auto-complete="true"></el-input>
                  <img class="loginCodeImg" :src="getImgCodeResults" @click="editCaptcha">
                </el-form-item>
                <el-button class="btn-login" type="primary" size="medium" @click="submitForm('form')">提交申请</el-button>
              </el-form>

 

效果：