antdesign vue表单校验

自定义指令

创建regular.js文件

import regular from "./regular"; // 引入的正则
let timer = null; // 监听input框，会一直触发，所以做个防抖
export default {
  install(Vue) { // install开发新的插件及全局注册组件等
      Vue.directive("custom", { 
          // custom：v-custom，也可以用驼峰来使用
          // 驼峰使用方法 uCustom 相当于 v-u-custom
          update: (el)=> { // update更新时操作
                el.handler = () => {
                    clearTimeout(timer); // 清空定时器
                    let val = el.getElementsByTagName("input")[0]; 
                    // el-input，有层div，我们要去取其子级
                    timer = setTimeout(() => { // 定时器
                        for (let key in regular) { // 循环导入规则对象
                            if (key === binding.value.regular) { 
                            // binding.value.regular从vue页面传过来参数
                            // 判断传过来参数是否跟导入规则对象某个属性名相同
                                if (regular[key].test(val.value)) { // 进行判断
                                    return console.log("成功");
                                } else {
                                    return (val.value = ""); // 判断失败清空数据
                                }
                            }
                        }
                    }, 1000);
                };
                el.addEventListener("keyup", el.handler); // 事件监听-按键触发
              }
          }，
          unbind: (el) => { // 只调用一次， 指令与元素解绑时调用
            el.removeEventListener("keyup", el.handler); // 移除监听
          },
      })
  }
}

在main.js中全局引入

import regular from "./utils/regular";
Vue.use(regular);

在页面中使用

<el-input v-model="data.name" v-custom="{
    regular: '规则对象的属性名'
}"></el-input>

自定义表单校验

创建check.js文件

import regular from "./regular"; // 引入的正则
export const formRule = (rule, value, callback, regularRule, Tips,secondTips, secondRule) => {
// rule, value, callback 原生参数, regularRule（要使用的正则）, Tips（提示语）, secondRule（第二个要使用的正则）,secondTips(第二个提示语)
  if (rule.required) {
    if (!value) {  // 判断是否为空
      callback(new Error(Tips)); // 为空提示第一个提示语
    } else {
      formCheck(rule, value, callback, regularRule, Tips,secondTips, secondRule); // 进行正则校验
    }
  } else {
    callback();
  }
};
export const formCheck = (
  rule,
  value,
  callback,
  regularRule,
  Tips,
  secondTips,
  secondRule
) => {
  if (!value) {
    callback();
  } else {
    for (let key in regular) { // 循环导入正则对象
      if (key === regularRule || key === secondRule) { // 判断传入是否与导入的匹配
      // (secondRule && regular[secondRule].test(value))  判断是不是有这个参数
        if (
          regular[regularRule].test(value) ||
          (secondRule && regular[secondRule].test(value)) 
        ) {
          callback();
        } else {
        // 判断是否有第二个提示语 有的就显示第二个没有就显示第一个
          callback(new Error(secondTips || Tips));
        }
      }
    }
  }
};

引入check.js文件

import { formRule } from "@/utils/check";
export default {
    data() {
        return {
            rules:{
                user:[{
                    validator: (rule, value, callback) =>
                         formRule(rule, value, callback, "a", "请输入正确用户名", "请输入中文或正确手机号",'e'),
                    required: true,
                    trigger: "blur",
                }]
            }
        }
    }
}
/* rule,value,callback（原本参数）,a我们设置校验的第一个规则，第二个参数是我们要提示的语句,第三个是参数是第二个提示语,第四个参数进行两个正则的判断 */

正则规则（均来自网上目前只验证到f，如有错误自行更改）

regular.js文件名

const regular = {
  a: /^13[\d]{9}$|^14[7,8]{1}\d{8}$|^15[^4]{1}\d{8}$|^17[3,5,6,7,8]{1}\d{8}$|^18[\d]{9}$|^19[9]{1}\d{8}$/, // 手机号
  b: /^[+]{0,1}(\d+)$/, // 正整数
  c: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, // 有小数不能为负数
  d: /^[\u4e00-\u9fa5-Za-z]{0,30}$/, // 中文或者英文
  e: /^[\u4e00-\u9fa5]{0,30}$/, // 只能中文
  f: /^\d+(\.\d{1,2})?$/, // 小数后两位
  g: /^[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]$/, // 身份证十八位
  h: /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$/, // 身份证十五位
  i: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, // 邮箱
  j: /^(0|[1-9][0-9]*)$/, // 零和非零开头的数字
  k: /^([1-9][0-9]*)+(.[0-9]{1,2})?$/, // 非零开头的最多带两位小数的数字
  l: /^(\-)?\d+(\.\d{1,2})?$/, // 带1-2位小数的正数或负数
  m: /^(\-|\+)?\d+(\.\d+)?$/, // 正数、负数、和小数
  n: /^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$/, //非零的正整数
  o: /^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$/, // 非零的负整数
  p: /^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$/, //英文和数字
  q: /^[A-Za-z]+$/, //由26个大写英文字母组成的字符串
  r: /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/, //帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)
  s: /^[a-zA-Z]\w{5,17}$/, //密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
  t: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/, //强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)
  u: /[1-9][0-9]{4,}/, // QQ号
  v: /[1-9]\d{5}(?!\d) /, // 邮编
  // w: 12, // 自行添加
  // x: 13, // 自行添加
  // y: 14, // 自行添加
  // z: 15, // 自行添加
};

export default regular;