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>

 

效果：