vue使用element ui可以用到的一些校验_vue项目,商品价格校验-CSDN博客

本文链接：https://blog.csdn.net/qq_41184533/article/details/105087851

本文介绍了在Vue项目中如何利用Element UI进行表单验证，通过创建独立的JS文件实现验证规则的全局复用，提高代码的可维护性和效率。

摘要由CSDN通过智能技术生成

vue使用element ui可以用到的一些校验，在项目中创建一个js文件，写到里面，可以全局使用

import Vue from "vue";
export default {
  //校验不通过弹出的提示信息
  validateInfo() {
    Vue.prototype.$message({
      message: "您还有数据未填写完整或填写错误！",
      type: "error",
      duration: 2000
    });
  },
  //身份证校验
  idCardValidator(rule, value, callback) {
    if (value === "" || typeof value == "undefined") {
      callback(new Error("请输入身份证号码"));
    } else if (
      !/(^[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{3}$)/.test(
        value
      )
    ) {
      // } else if(!((/^1[3|5|7|8][0-9]\d{8}$/.test(value)))) {
      callback(new Error("请输入正确的身份证号码"));
    } else {
      callback();
    }
  },
  //IP地址校验
  IpAddressValidator(rule, value, callback) {
    if (value === "" || typeof value == "undefined") {
      callback(new Error("请输入IP地址"));
    } else if (
      !/((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}/g.test(
        value
      )
    ) {
      // } else if(!((/^1[3|5|7|8][0-9]\d{8}$/.test(value)))) {
      callback(new Error("请输入正确的IP地址"));
    } else {
      callback();
    }
  },
  //联系电话校验
  phoneNumValidator(rule, value, callback) {
    if (value === "" || typeof value == "undefined") {
      callback(new Error("请输入联系号码"));
    } else if (!/^1[0-9]{10}$/.test(