vue + element-ui 表單校驗封裝公用方法

1.新建表單驗證方法封裝 src/utils/formCheck.js

// 手機號碼驗證
const validatePhone = (rule, value, callback) => {
  const patter = new RegExp('^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$')
  if (!patter.test(value)) {
    return callback(new Error('請輸入正確格式的手機號！'))
  } else {
    callback() // 必須有此項回調，否則驗證會一直不通過
  }
}
// 郵箱的正則
const validateEmail = (rule, value, callback) => {
  const mailbox = new RegExp('^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$')
  if (!mailbox.test(value)) {
    return callback(new Error('請輸入正確格式的郵箱！'))
  } else {
    callback()
  }
}
// 身份證號
const validateIdCardNo = (rule, value, callback) => {
  const mailbox = new RegExp('^[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}[0-9Xx]$')
  if (!mailbox.test(value)) {
    return callback(new Error('請輸入正確格式的身份證號！'))
  } else {
    callback()
  }
}
export default {
  common: { 
    // ---------------------公共驗證方法
    phone: [{// 手機號
      required: true,
      message: '手機號不能為空'
    }, {
      validator: validatePhone,
      trigger: 'blur'
    }],
    email: [{// 郵箱
        required: true,
        message: '郵箱不能為空'
      },
      {
        validator: validateEmail,
        trigger: 'blur'
      }
    ],
    idCardNo: [{// 身份證號碼
        required: true,
        message: '身份證號碼不能為空'
      },
      {
        validator: validateIdCardNo,
        trigger: 'blur'
      }
    ]
  },
  handle: {
    // ---------------------處理表單的驗證方法
    operResult: [{//處理結果
      required: true,
      message: '請選擇處理結果'
    }],
    opinion: [{//處理結果描述
      required: true,
      message: '請填寫處理結果描述'
    }]
  },
　　　　
}

export default內可以分類封裝驗證，封裝不同表單的驗證方法

2.全局掛在 main.js

import rules from './utils/formCheck.js'

// 全局方法掛載
Vue.prototype.$rules = rules

3.使用

表單標簽加  :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>

單獨使用 :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>