花名册-表单验证

src/utils/common.js

@@ -165,6 +165,7 @@ export default {
     }
   },
   /**
+   * 身份证号验证
    * @param {string} value
    */
   isIDCardNo(value) {
@@ -175,6 +176,11 @@ export default {
       return true;
     }
   },
+  /**
+   * 从身份证号中获取出生日期、性别、年龄
+   * @param idCard
+   * @returns {{sex: string, birth: null, age: number}}
+   */
   decomposeIdCard(idCard) {
     let sex = null
     let birth = null

src/utils/validateXG.js

@@ -40,4 +40,15 @@ export function isLinkMobile (str) {
   return linkMobile.test(str)
 }
 
-export default {isMobile, isPhone, isBankNumber, isLinkMobile}
+/**
+ * 银行卡号验证
+ * 银行卡号:12位 16位 17 18 19
+ * @param str
+ * @returns {boolean}
+ */
+export function isBankNum (str) {
+  const bankNumber = /^([1-9]{1})(\d{11}|\d{15}|\d{16}|\d{17}|\d{18})$/
+  return bankNumber.test(str)
+}
+
+export default {isMobile, isPhone, isBankNumber, isLinkMobile, isBankNum}

src/utils/validatorXG.js

@@ -1,4 +1,5 @@
 import validateXG from './validateXG'
+import validate from './validate'
 
 var isMobile = (rule, value, callback) => {
   if (value && !validateXG.isMobile(value)) {
@@ -32,4 +33,20 @@ var isLinkMobile = (rule, value, callback) => {
   }
 }
 
-export default {isMobile, isPhone, isBankNumber, isLinkMobile}
+var isIntGtZero = (rule, value, callback) => {
+  if (value && !validate.isIntGtZero(value)) {
+    callback(new Error('请输入大于0整数'))
+  } else {
+    callback()
+  }
+}
+
+var isBankNum = (rule, value, callback) => {
+  if (value && !validateXG.isBankNum(value)) {
+    callback(new Error('请输入正确的银行卡号'))
+  } else {
+    callback()
+  }
+}
+
+export default {isMobile, isPhone, isBankNumber, isLinkMobile, isIntGtZero, isBankNum}

src/views/modules/roster/RosterForm.vue

@@ -8,13 +8,13 @@
       @close="close"
       @keyup.enter.native="doSubmit"
       :visible.sync="visible">
-      <el-form size="middle" :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
+      <el-form size="middle" :model="inputForm" ref="inputForm" :rules="rules" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
                label-width="125px" @submit.native.prevent>
 
         <el-divider content-position="left"><i class="el-icon-document"></i> 基础信息</el-divider>
         <el-row  :gutter="15">
           <el-col :span="12">
-            <el-form-item label="头像" :prop="headshot"
+            <el-form-item label="头像" prop="headshot"
                           :rules="[
                  ]">
               <el-popover
@@ -126,10 +126,8 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="证件号" prop="idCard"
-                          :rules="[{required: true, message: '证件号不能为空', trigger: 'blur'}
-                 ]">
-              <el-input v-model="inputForm.idCard" placeholder="请填写证件号"   @blur="blurIdCard"  clearable></el-input>
+            <el-form-item label="证件号" prop="idCard">
+              <el-input v-model="inputForm.idCard" placeholder="请填写证件号"  clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -184,9 +182,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="手机号码" prop="mobile"
-                          :rules="[{required: true, message: '手机号码不能为空', trigger: 'blur'}
-                 ]">
+            <el-form-item label="手机号码" prop="mobile">
               <el-input v-model="inputForm.mobile" placeholder="请填写手机号码"     clearable></el-input>
             </el-form-item>
           </el-col>
@@ -232,9 +228,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="历史工龄" prop="seniority"
-                          :rules="[
-                 ]">
+            <el-form-item label="历史工龄" prop="seniority">
               <el-input v-model="inputForm.seniority" placeholder="请填写历史工龄"     clearable></el-input>
             </el-form-item>
           </el-col>
@@ -441,9 +435,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="QQ" prop="qq"
-                          :rules="[
-                 ]">
+            <el-form-item label="QQ" prop="qq">
               <el-input v-model="inputForm.qq" placeholder="请填写QQ"     clearable></el-input>
             </el-form-item>
           </el-col>
@@ -455,9 +447,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="个人邮箱" prop="email"
-                          :rules="[
-                 ]">
+            <el-form-item label="个人邮箱" prop="email">
               <el-input v-model="inputForm.email" placeholder="请填写个人邮箱"     clearable></el-input>
             </el-form-item>
           </el-col>
@@ -498,9 +488,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="工作邮箱" prop="rosterContractDTO.workEmail"
-                          :rules="[
-                 ]">
+            <el-form-item label="工作邮箱" prop="rosterContractDTO.workEmail">
               <el-input v-model="inputForm.rosterContractDTO.workEmail" placeholder="请填写工作邮箱"     clearable></el-input>
             </el-form-item>
           </el-col>
@@ -525,9 +513,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="试用期(月)" prop="rosterContractDTO.probationPeriodMonth"
-                          :rules="[
-                 ]">
+            <el-form-item label="试用期(月)" prop="rosterContractDTO.probationPeriodMonth">
               <el-input v-model="inputForm.rosterContractDTO.probationPeriodMonth" placeholder="请填写试用期(月)" clearable></el-input>
             </el-form-item>
           </el-col>
@@ -571,6 +557,8 @@
             <el-col :span="12">
               <el-form-item label="工资卡银行账号" :prop="'rosterBankCardsDTOList[' + index_bank + '].payrollCardBankAccount'"
                             :rules="[
+                            {validator: validatorXG.isBankNum, trigger: 'change'},
+                            {validator: validatorXG.isBankNum, trigger: 'blur'}
                  ]">
                 <el-input v-model="inputForm.rosterBankCardsDTOList[index_bank].payrollCardBankAccount" placeholder="请填写工资卡银行账号"     clearable></el-input>
               </el-form-item>
@@ -1068,6 +1056,9 @@
   import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
   export default {
     data () {
+      let checkIdCard = (rule, value, callback) => {
+        this.blurIdCard(value, callback)
+      }
       return {
         title: '',
         method: '',
@@ -1137,7 +1128,38 @@
         positionList: [],
         rankList: [],
         showViewer: false,
-        url: ''
+        url: '',
+        rules: {
+          idCard: [{required: true, message: '证件号不能为空', trigger: 'blur'},
+            {validator: checkIdCard, trigger: 'change'},
+            {validator: checkIdCard, trigger: 'blur'}
+          ],
+          mobile: [
+            {required: true, message: '手机号码不能为空', trigger: 'blur'},
+            {validator: this.validatorXG.isMobile, trigger: 'change'},
+            {validator: this.validatorXG.isMobile, trigger: 'blur'}
+          ],
+          seniority: [
+            {validator: this.validatorXG.isIntGtZero, trigger: 'change'},
+            {validator: this.validatorXG.isIntGtZero, trigger: 'blur'}
+          ],
+          'rosterContractDTO.probationPeriodMonth': [
+            {validator: this.validatorXG.isIntGtZero, trigger: 'change'},
+            {validator: this.validatorXG.isIntGtZero, trigger: 'blur'}
+          ],
+          'rosterContractDTO.workEmail': [
+            {validator: this.validator.isEmail, trigger: 'change'},
+            {validator: this.validator.isEmail, trigger: 'blur'}
+          ],
+          email: [
+            {validator: this.validator.isEmail, trigger: 'change'},
+            {validator: this.validator.isEmail, trigger: 'blur'}
+          ],
+          qq: [
+            {validator: this.validator.isQq, trigger: 'change'},
+            {validator: this.validator.isQq, trigger: 'blur'}
+          ]
+        }
       }
     },
     rankService: null,
@@ -1516,17 +1538,18 @@
           }
         })
       },
-      blurIdCard () {
+      blurIdCard (value, callback) {
         if (!this.commonJS.isEmpty(this.inputForm.certificatesType)) {
           if (this.inputForm.certificatesType === '1') {
-            if (!this.commonJS.isEmpty(this.inputForm.idCard)) {
-              if (!this.commonJS.isIDCardNo(this.inputForm.idCard)) {
-                this.$message.error('居民身份证填写格式不正确')
-                return
+            if (!this.commonJS.isEmpty(value)) {
+              if (!this.commonJS.isIDCardNo(value)) {
+                callback(new Error('居民身份证填写格式不正确'))
+              } else {
+                const info = this.commonJS.decomposeIdCard(value)
+                this.inputForm.birthDate = info.birth
+                this.inputForm.sex = info.sex
+                callback()
               }
-              const info = this.commonJS.decomposeIdCard(this.inputForm.idCard)
-              this.inputForm.birthDate = info.birth
-              this.inputForm.sex = info.sex
             }
           }
         }