feat：优化校验规则

2024-12-23 05:40:20 +08:00 · 2023-03-02 11:27:53 +08:00 · 2023-03-02 11:27:53 +08:00 · 41949ba4e3
commit 41949ba4e3
parent dacf6224ba
4 changed files with 89 additions and 102 deletions
--- a/src/api/login/index.ts
+++ b/src/api/login/index.ts
@ -1,6 +1,6 @@
 import request from '/@/utils/request';
 import { Session } from "/@/utils/storage";
-import { rule } from "/@/utils/validate"
+import { validateNull } from "/@/utils/validate"
 import { useUserInfo } from "/@/stores/userInfo";

 /**
@ -99,7 +99,7 @@ export const checkToken = (refreshTime: number, refreshLock: boolean) => {
        params: { token: Session.get("token") }
    })
        .then((response) => {
-            if (rule.validatenull(response) || response.code === 1) {
+            if (validateNull(response) || response.code === 1) {
                clearInterval(refreshTime)
                return
            }
--- a/src/utils/validate.ts
+++ b/src/utils/validate.ts
@ -1,49 +1,8 @@
-/**
- * @desc  [自定义校验规则]
- * @example
- *  import { validateRule } from "@/utils/validateRules";
- *  rules: [
- *     { validator: validateRule.emailValue, trigger: 'blur'}
- *  ]
- */
-
-export const getRegExp = function (validatorName) {
-  const commonRegExp = {
-    number: '/^[-]?\\d+(\\.\\d+)?$/',
-    letter: '/^[A-Za-z]+$/',
-    letterAndNumber: '/^[A-Za-z0-9]+$/',
-    mobilePhone: '/^[1][3-9][0-9]{9}$/',
-    letterStartNumberIncluded: '/^[A-Za-z]+[A-Za-z\\d]*$/',
-    noChinese: '/^[^\u4e00-\u9fa5]+$/',
-    chinese: '/^[\u4e00-\u9fa5]+$/',
-    email: '/^([-_A-Za-z0-9.]+)@([_A-Za-z0-9]+\\.)+[A-Za-z0-9]{2,3}$/',
-    url: '/^([hH][tT]{2}[pP]:\\/\\/|[hH][tT]{2}[pP][sS]:\\/\\/)(([A-Za-z0-9-~]+)\\.)+([A-Za-z0-9-~\\/])+$/',
-  }
-
-  return commonRegExp[validatorName]
-}
-
-const validateFn = function (validatorName, rule, value, callback, defaultErrorMsg) {
-  //空值不校验
-  if (validatenull(value) || (value.length <= 0)) {
-    callback()
-    return
-  }
-
-  const reg = eval(getRegExp(validatorName))
-
-  if (!reg.test(value)) {
-    let errTxt = rule.errorMsg || defaultErrorMsg
-    callback(new Error(errTxt))
-  } else {
-    callback()
-  }
-}
-
 /**
 * 判断是否为空
+ * @param val 数据
 */
-const validatenull = (val: any) =>  {
+export const validateNull = (val: any) => {
  if (typeof val === 'boolean') {
    return false
  }
@ -62,6 +21,7 @@ const validatenull = (val: any) =>  {
 }


+
 export const rule = {
  /**
     * 校验 请输入中文、英文、数字包括下划线
@ -107,7 +67,7 @@ export const rule = {
  validatePhone(rule: any, value: any, callback: any) {
    var isPhone = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/

-    if(value.indexOf('****') >= 0){
+    if (value.indexOf('****') >= 0) {
      return callback()
    }

@ -118,9 +78,6 @@ export const rule = {
    }
  },

-
-
-
  /* 数字 */
  number(rule, value, callback) {
    validateFn('number', rule, value, callback, '[' + rule.label + ']包含非数字字符')
@ -141,7 +98,6 @@ export const rule = {
    validateFn('mobilePhone', rule, value, callback, '[' + rule.label + ']手机号码格式有误')
  },

-
  /* 字母开头，仅可包含数字 */
  letterStartNumberIncluded(rule, value, callback) {
    validateFn('letterStartNumberIncluded', rule, value, callback, '[' + rule.label + ']必须以字母开头，可包含数字')
@ -169,11 +125,10 @@ export const rule = {

  regExp(rule, value, callback) {
    //空值不校验
-    if (validatenull(value) || (value.length <= 0)) {
+    if (validateNull(value) || (value.length <= 0)) {
      callback()
      return
    }
-
    const pattern = eval(rule.regExp)
    if (!pattern.test(value)) {
      let errTxt = rule.errorMsg || '[' + rule.label + ']invalid value'
@ -185,4 +140,46 @@ export const rule = {

 }

+/**
+ * @desc  [自定义校验规则]
+ * @example
+ *  import { validateRule } from "@/utils/validateRules";
+ *  rules: [
+ *     { validator: validateRule.emailValue, trigger: 'blur'}
+ *  ]
+ */
+
+export const getRegExp = function (validatorName) {
+  const commonRegExp = {
+    number: '/^[-]?\\d+(\\.\\d+)?$/',
+    letter: '/^[A-Za-z]+$/',
+    letterAndNumber: '/^[A-Za-z0-9]+$/',
+    mobilePhone: '/^[1][3-9][0-9]{9}$/',
+    letterStartNumberIncluded: '/^[A-Za-z]+[A-Za-z\\d]*$/',
+    noChinese: '/^[^\u4e00-\u9fa5]+$/',
+    chinese: '/^[\u4e00-\u9fa5]+$/',
+    email: '/^([-_A-Za-z0-9.]+)@([_A-Za-z0-9]+\\.)+[A-Za-z0-9]{2,3}$/',
+    url: '/^([hH][tT]{2}[pP]:\\/\\/|[hH][tT]{2}[pP][sS]:\\/\\/)(([A-Za-z0-9-~]+)\\.)+([A-Za-z0-9-~\\/])+$/',
+  }
+  return commonRegExp[validatorName]
+}
+
+const validateFn = function (validatorName, rule, value, callback, defaultErrorMsg) {
+  //空值不校验
+  if (validateNull(value) || (value.length <= 0)) {
+    callback()
+    return
+  }
+
+  const reg = eval(getRegExp(validatorName))
+
+  if (!reg.test(value)) {
+    let errTxt = rule.errorMsg || defaultErrorMsg
+    callback(new Error(errTxt))
+  } else {
+    callback()
+  }
+}
+
+

--- a/src/views/admin/user/form.vue
+++ b/src/views/admin/user/form.vue
@ -1,7 +1,7 @@
 <template>
  <div class="system-user-dialog-container">
    <el-dialog :title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible"
-               :close-on-click-modal="false" draggable>
+      :close-on-click-modal="false" draggable>
      <el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="90px" v-loading="loading">
        <el-row :gutter="20">
          <el-col :span="12" class="mb20">
@ -27,23 +27,22 @@
          <el-col :span="12" class="mb20">
            <el-form-item :label="$t('sysuser.role')" prop="role">
              <el-select v-model="dataForm.role" placeholder="请选择角色" clearable class="w100" multiple>
-                <el-option v-for="item in roleData" :key="item.roleId" :label="item.roleName" :value="item.roleId"/>
+                <el-option v-for="item in roleData" :key="item.roleId" :label="item.roleName" :value="item.roleId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item :label="$t('sysuser.post')" prop="post">
              <el-select v-model="dataForm.post" placeholder="请选择岗位" clearable class="w100" multiple>
-                <el-option v-for="item in postData" :key="item.postId" :label="item.postName" :value="item.postId"/>
+                <el-option v-for="item in postData" :key="item.postId" :label="item.postName" :value="item.postId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item :label="$t('sysuser.dept')" prop="dept">
              <el-tree-select v-model="dataForm.deptId" :data="deptData"
-                              :props="{ value: 'id', label: 'name', children: 'children' }" class="w100" clearable
-                              check-strictly
-                              placeholder="请选择所属部门">
+                :props="{ value: 'id', label: 'name', children: 'children' }" class="w100" clearable check-strictly
+                placeholder="请选择所属部门">
              </el-tree-select>
            </el-form-item>
          </el-col>
@ -79,21 +78,21 @@
 </template>

 <script setup lang="ts" name="systemUserDialog">
-import {getObj, addObj, putObj, validateUsername, validatePhone} from '/@/api/admin/user'
-import {list as roleList} from '/@/api/admin/role'
-import {list as postList} from '/@/api/admin/post'
-import {depttree} from '/@/api/admin/dept'
-import {useDict} from "/@/hooks/dict";
-import {useI18n} from "vue-i18n";
-import {useMessage} from '/@/hooks/message';
-import {rule} from '/@/utils/validate';
+import { getObj, addObj, putObj, validateUsername, validatePhone } from '/@/api/admin/user'
+import { list as roleList } from '/@/api/admin/role'
+import { list as postList } from '/@/api/admin/post'
+import { depttree } from '/@/api/admin/dept'
+import { useDict } from "/@/hooks/dict";
+import { useI18n } from "vue-i18n";
+import { useMessage } from '/@/hooks/message';
+import { rule } from '/@/utils/validate';

-const {t} = useI18n()
+const { t } = useI18n()

 // 定义刷新表格emit
 const emit = defineEmits(['refresh']);
 // @ts-ignore
-const {lock_flag} = useDict('lock_flag')
+const { lock_flag } = useDict('lock_flag')

 // 定义变量内容
 const dataFormRef = ref();
@ -123,39 +122,30 @@ const dataForm = reactive({
 });

 const dataRules = ref(
-    {
-      username: [{required: true, message: "用户名不能为空", trigger: "blur"}, {
-        min: 5,
-        max: 20,
-        message: "用户名称长度必须介于 5 和 20 之间",
-        trigger: "blur"
-      }, {
-        validator: (rule: any, value: any, callback: any) => {
-          validateUsername(rule, value, callback, dataForm.userId !== '')
-        }, trigger: 'blur'
-      }],
-      password: [{required: true, message: "密码不能为空", trigger: "blur"}, {
-        min: 6,
-        max: 20,
-        message: "用户密码长度必须介于 6 和 20 之间",
-        trigger: "blur"
-      }],
-      name: [{required: true, message: "姓名不能为空", trigger: "blur"}],
-      deptId: [{required: true, message: "部门不能为空", trigger: "blur"}],
-      role: [{required: true, message: "角色不能为空", trigger: "blur"}],
-      post: [{required: true, message: "岗位不能为空", trigger: "blur"}],
-      phone: [{required: true, message: "手机号不能为空", trigger: "blur"}, {
-        validator: rule.validatePhone,
-        trigger: 'blur'
-      }, {
-        validator: {
-          validator: (rule: any, value: any, callback: any) => {
-            validatePhone(rule, value, callback, dataForm.userId !== '')
-          }, trigger: 'blur'
-        }, trigger: 'blur'
-      }],
-      email: [{type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"]}]
-    }
+  {
+    username: [{ required: true, message: "用户名不能为空", trigger: "blur" }
+      , { min: 5, max: 20, message: "用户名称长度必须介于 5 和 20 之间", trigger: "blur" }
+      , {
+      validator: (rule: any, value: any, callback: any) => {
+        validateUsername(rule, value, callback, dataForm.userId !== '')
+      }, trigger: 'blur'
+    }],
+    password: [{ required: true, message: "密码不能为空", trigger: "blur" }, { min: 6, max: 20, message: "用户密码长度必须介于 6 和 20 之间", trigger: "blur" }],
+    name: [{ required: true, message: "姓名不能为空", trigger: "blur" }
+      , { validator: rule.chinese, trigger: 'blur' }
+    ],
+    deptId: [{ required: true, message: "部门不能为空", trigger: "blur" }],
+    role: [{ required: true, message: "角色不能为空", trigger: "blur" }],
+    post: [{ required: true, message: "岗位不能为空", trigger: "blur" }],
+    phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }
+      , { validator: rule.validatePhone, trigger: 'blur' }
+      , {
+      validator: (rule: any, value: any, callback: any) => {
+        validatePhone(rule, value, callback, dataForm.userId !== '')
+      }, trigger: 'blur'
+    }],
+    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }]
+  }
 )

 // 打开弹窗
--- a/src/views/login/component/authredirect.vue
+++ b/src/views/login/component/authredirect.vue
@ -13,7 +13,7 @@ onMounted(async () => {

  // 优先获取 code 参数，获取不到 则换成 ticket
  let code = other.getQueryString(url, 'code')
-  if (rule.validatenull(code)) {
+  if (rule.validateNull(code)) {
    code = other.getQueryString(url, 'ticket')
  }