联系人创建表单增加正则校验

src/modules/customer/components/CreateContact.vue

@@ -61,8 +61,58 @@
 
 <script>
 import { createContact, UpdateContact } from '../api'
+const phoneExp = /^1[3|4|5|6|7|8|9]\d{9}$/
+const telExp = /0\d{2,3}-\d{7,8}/
+const qqExp = /^[1-9][0-9]{4,10}$/
+const wxExp = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/
+const emailExp = /^[A-Za-z0-9]+([_.\\-][A-Za-z0-9]+)*@[A-Za-z0-9-.]+$/
 export default {
   data() {
+    const validateTel = (rule, value, callback) => {
+      if (value) {
+        if (!phoneExp.test(value) && !telExp.test(value)) {
+          callback(new Error('电话号码格式错误'))
+        } else {
+          callback()
+        }
+      }
+    }
+    const validateEmail = (rule, value, callback) => {
+      if (value) {
+        if (!emailExp.test(value)) {
+          callback(new Error('邮箱格式错误'))
+        } else {
+          callback()
+        }
+      }
+    }
+    const validateWechat = (rule, value, callback) => {
+      if (value) {
+        if (!wxExp.test(value)) {
+          callback(new Error('微信格式错误'))
+        } else {
+          callback()
+        }
+      }
+    }
+    const validateQQ = (rule, value, callback) => {
+      if (value) {
+        if (!qqExp.test(value)) {
+          callback(new Error('QQ格式错误'))
+        } else {
+          callback()
+        }
+      }
+    }
+    const validateMobile = (rule, value, callback) => {
+      if (value) {
+        if (!phoneExp.test(value)) {
+          callback(new Error('附属手机格式错误'))
+        } else {
+          callback()
+        }
+      }
+    }
     return {
       btnDisabled: false,
       form: {
@@ -77,7 +127,14 @@ export default {
       },
       rules: {
         name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
-        mobile: [{ required: true, message: '请输入电话', trigger: 'blur' }]
+        mobile: [
+          { required: true, message: '请输入电话', trigger: 'blur' },
+          { validator: validateTel, trigger: 'blur' },
+        ],
+        email: { validator: validateEmail, trigger: 'blur' },
+        wechat: { validator: validateWechat, trigger: 'blur' },
+        qq: { validator: validateQQ, trigger: 'blur' },
+        sub_mobile: { validator: validateMobile, trigger: 'blur' }
       }
     }
   },