表单的自定义校验规则

做后台管理系统，肯定会有一堆表单要填，就会要用到表单校验。

在utils文件夹下新建文件validator.js，然后在mian.js中引入并且挂载到原型上。

main.js

//在mian.js中引入
import FormValidator from '@/utils/validator',
//挂到Vue的原型上
Vue.prototype.FormValidator = FormValidator

validator.js

//验证邮箱正则
let email = /^(\w+\.?)*\w+@(?:\w+\.)\w+$/ 
//验证邮箱正则
let idCard = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/
//验证银行卡号正则
let bankCardNumber = /^([1-9]{1})(\d{15}|\d{18})$/
//验证金额正则
let money = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/
//验证IP地址正则
let ip = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
export default function() {
    return {
    // 邮箱的验证规则
    Email: function(rule, value, callback) {
      if (!value) {
        return callback(new Error('邮箱不能为空'))
      }
      if (!email.test(value)) {
        callback(new Error('请输入正确的邮箱!'))
      } else {
        callback()
      }
    },
    // 身份证的验证规则
    ID: function(rule, value, callback) {
      if (!value) {
        return callback(new Error('身份证不能为空'))
      }
      if (!idCard.test(value)) {
        callback(new Error('请输入正确的二代身份证号码'))
      } else {
        callback()
      }
    },
    // 银行卡的验证规则
    Bank: function(rule, value, callback) {
      if (!value) {
        return callback(new Error('银行卡号不能为空'))
      }
      if (!bankCardNumber.test(value)) {
        callback(new Error('请输入正确的银行卡号!'))
      } else {
        callback()
      }
    },
    // 金额的验证规则
    Money: (rule, value, callback) => {
      if (!value) {
        return callback(new Error('金额不能为空'))
      }
      if (!money.test(value)) {
        callback(new Error('金额格式不正确'))
      } else {
        callback()
      }
    },
    // IP地址的验证规则
    IP: (rule, value, callback) => {
      if (!value) {
        return callback(new Error('IP地址不能为空'))
      }
      if (!ip.test(value)) {
        callback(new Error('IP地址格式不正确'))
      } else {
        callback()
      }
    },
    }
}

待续......