表单校验：表单简例、各种业务常见正则匹配；

Post author:xfxia
Post published:2023年7月19日
Post category:其他

正则匹配 | 表单校验

一、Element-Plus 表单简例[内含常见验证需求]；
二、表单校验rules的type属性；
- 2.1 type: ‘number’ 类型： [ transform属性，校验前进行类型转换 ]
- 2.2枚举 type: ‘enum’ 类型：
三、表单校验rules的whitespace属性；

预览：

在这里插入图片描述

一、Element-Plus 表单简例[内含常见验证需求]；

1. 电话检测所需JS [ checkTelphone.js ]

/checkTelphone.js

匹配所有电话格式,不限于国内; 有一个符合则返回 true;

let phone_pattern = [
    /^(\+?213|0)(5|6|7)\d{8}$/,
    /^(!?(\+?963)|0)?9\d{8}$/,
    /^(!?(\+?966)|0)?5\d{8}$/,
    /^(\+?1)?[2-9]\d{2}[2-9](?!11)\d{6}$/,
    /^(\+?420)? ?[1-9][0-9]{2} ?[0-9]{3} ?[0-9]{3}$/,
    // /^(\+?49[ \.\-])?([\(]{1}[0-9]{1,6}[\)])?([0-9 \.\-\/]{3,20})((x|ext|extension)[ ]?[0-9]{1,4})?$/,
    /^(\+?45)?(\d{8})$/,
    /^(\+?30)?(69\d{8})$/,
    /^(\+?61|0)4\d{8}$/,
    /^(\+?44|0)7\d{9}$/,
    /^(\+?852\-?)?[569]\d{3}\-?\d{4}$/,
    /^(\+?91|0)?[789]\d{9}$/,
    /^(\+?64|0)2\d{7,9}$/,
    /^(\+?27|0)\d{9}$/,
    /^(\+?26)?09[567]\d{7}$/,
    /^(\+?34)?(6\d{1}|7[1234])\d{7}$/,
    /^(\+?358|0)\s?(4(0|1|2|4|5)?|50)\s?(\d\s?){4,8}\d$/,
    /^(\+?33|0)[67]\d{8}$/,
    /^(\+972|0)([23489]|5[0248]|77)[1-9]\d{6}/,
    /^(\+?36)(20|30|70)\d{7}$/,
    /^(\+?39)?\s?3\d{2} ?\d{6,7}$/,
    /^(\+?81|0)\d{1,4}[ \-]?\d{1,4}[ \-]?\d{4}$/,
    /^(\+?6?01){1}(([145]{1}(\-|\s)?\d{7,8})|([236789]{1}(\s|\-)?\d{7}))$/,
    /^(\+?47)?[49]\d{7}$/,
    /^(\+?32|0)4?\d{8}$/,
    /^(\+?47)?[49]\d{7}$/,
    /^(\+?48)? ?[5-8]\d ?\d{3} ?\d{2} ?\d{2}$/,
    /^(\+?55|0)\-?[1-9]{2}\-?[2-9]{1}\d{3,4}\-?\d{4}$/,
    /^(\+?351)?9[1236]\d{7}$/,
    /^(\+?7|8)?9\d{9}$/,
    /^(\+3816|06)[- \d]{5,9}$/,
    /^(\+?90|0)?5\d{9}$/,
    /^(\+?84|0)?((1(2([0-9])|6([2-9])|88|99))|(9((?!5)[0-9])))([0-9]{7})$/,
    /^(\+?0?86\-?)?1[345789]\d{9}$/,
    /^(\+?886\-?|0)?9\d{8}$/
]
export default function (string) {
    var isOK = phone_pattern.some(ele => {
        var reg = new RegExp(ele);
        return reg.test(string) === true;
    })
    return isOK;
}

2. html示例模板

HTML:

   <el-dialog v-model="dialogFormVisible" title="表单-检验-正则">
      <!-- 是否以行内形式展示校验信息 :inline-message="false"  -->
      <!-- 是否显示必填字段的标签旁边的红色星号  :hide-required-asterisk="false" -->
      <!-- 是否在输入框中显示校验结果反馈图标   :status-icon="true" -->
      <!-- 是否在 rules 属性改变后立即触发一次验证  :validate-on-rule-change="true" -->
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        :hide-required-asterisk="false"
        :inline-message="false"
        :status-icon="true"
        :size="mini"
        :validate-on-rule-change="true"
        label-width="300px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="动态改变required"
          prop="changeRequired"
          :rules="!needRemark ? [{ required: false }] : rules.changeRequired"
        >
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="shopName">
          <!-- 去除输入内容的空格 -->
          <el-input
            v-model="ruleForm.shopName"
            @keyup="ruleForm.name = ruleForm.name.replace(/\s/g, '')"
          ></el-input>
        </el-form-item>
        <el-form-item label="数字" prop="number">
          <el-input v-model="ruleForm.number"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="telephone">
          <el-input v-model="ruleForm.telephone"></el-input>
        </el-form-item>
        <el-form-item label="金额[小数点2位]" prop="money">
          <el-input v-model="ruleForm.money"></el-input>
        </el-form-item>
         <el-form-item label="type=number" prop="typeNumber">
          <el-input v-model="ruleForm.typeNumber"></el-input>
        </el-form-item>
        <el-form-item label="整数" prop="int">
          <el-input v-model="ruleForm.int"></el-input>
        </el-form-item>
        <el-form-item label="正整数" prop="zhengShu">
          <el-input v-model="ruleForm.zhengShu"></el-input>
        </el-form-item>
        <el-form-item label="自然数[内含动态校验]" prop="ziRanShu">
          <el-input
            v-model="ruleForm.ziRanShu"
            placeholder="正负整数或0,一般用于变换数量"
          ></el-input>
        </el-form-item>
        <el-form-item label="纯空格报错" prop="whitespace">
          <el-input v-model="ruleForm.whitespace"></el-input>
        </el-form-item>
        <el-form-item label="最大最小长度" prop="minmax">
          <el-input v-model="ruleForm.minmax"></el-input>
        </el-form-item>
        <el-form-item label="精确长度" prop="length">
          <el-input v-model="ruleForm.length"></el-input>
        </el-form-item>
        <el-form-item label="枚举验证" prop="enum">
          <el-input v-model="ruleForm.enum"></el-input>
        </el-form-item>
        <el-form-item label="网址http://www." prop="url">
          <el-input v-model="ruleForm.url"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >Create</el-button
          >
          <el-button @click="resetForm('ruleForm')">Reset</el-button>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >Confirm</el-button
          >
        </span>
      </template>
    </el-dialog>

3. 示例 js

JS：

// 引入电话校验所需的正则数组js
import checkTelphoneJS from "@/until/checkTelphone.js";

export default {
  name: "HelloWorld",
  data() {
  // 
  const checkTelphone = (rule, value, callback) => {
      if (checkTelphoneJS(value)) {
           return callback();
       } else {
           return callback(new Error("电话输入有误!"));
       }
   };
  // 判定数字类型是否满足业务18岁
    const checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("Please input the age"));
      }
      setTimeout(() => {
        // 判断整数 Number.isInteger()
        if (!Number.isInteger(value)) {
          callback(new Error("Please input digits"));
        } else {
          if (value < 18) {
            callback(new Error("Age must be greater than 18"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    // 检测数量
    var checkNum = (rule, value, callback) => {
      // Math.abs() 绝对值
      if (parseInt(value) < 0 && Math.abs(parseInt(value)) > 100) {
        return callback(new Error("现有库存量不足"));
      } else {
        return callback();
      }
    };
    return {
      needRemark: false, // 动态设置rules检验required
      dialogFormVisible: true,
      ruleForm: {
        email: "",
        shopName: "",
        telephone: 0,
        money: "",
        int: "",
        zhengShu: "",
        ziRanShu: "",
        changeRequired: "",
        whitespace: "",
        number: 0,
        minmax: "",
        length: "",
        enum: "",
        url: "",
        typeNumber:'',
      },
      rules: {
        url: [{ type: "url", message: `请输入正确的url`, trigger: "change" }],
        enum: [
          {
            type: "enum",
            enum: ["aaa", "bbb"],
            message: `值必须存在于中 enum`,
            trigger: "change",
          },
        ],
        length: [{ len: 5, message: "请输入5位", trigger: "blur" }],
        minmax: [{ min: 3, max: 8, message: "请输入3-8位", trigger: "blur" }],
        changeRequired: [
          {
            required: true,
            trigger: "blur",
            message: "Please select Activity zone",
          },
        ],
        shopName: [{ required: true, trigger: "blur" }],
        number: [{ required: true, validator: checkAge, trigger: "blur" }],
        typeNumber: [
          {
            type: "number",
            message: "请输入数字[整数，小数，0，各种数字]",
            trigger: "blur",
            // 校验前进行数据类型处理;
            transform: (value) => Number(value),
          },
        ],
        email: [
          {
            type: "email",
            required: true,
            message: "请输入正确的邮箱地址!youxiang@163.com",
            trigger: "blur",
          },
        ],
        telephone: [
         	{ type: "number", message: `请输入数字`, trigger: "blur" },
			{ required: true, validator: checkTelphone, trigger: "blur" },
		],
        money: [
          { required: true, trigger: "blur", message: "请输入金额!" },
          {
            trigger: ["change", "blur"],
            pattern:
              /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: "请输入正确金钱格式(最多保留两位小数)!",
          },
        ],
        int: [
          {
            required: true,
            message: "Please select at least one activity type",
            trigger: "change",
          },
        ],
        zhengShu: [
          { required: true, message: "不能为空!", trigger: "blur" },
          {
            pattern: /^\d+$/,
            message: "请输入正整数",
            trigger: ["blur", "change"],
          },
        ],
        ziRanShu: [
          // 动态校验
          { required: true, validator: checkNum, trigger: "change" },
          {
            pattern: /^-?[0-9]\d*$/,
            trigger: ["blur", "change"],
            message: "请输入自然数[正负整数或0]",
          },
        ],
        // 空白
        whitespace: [
          { whitespace: true, message: "只存在空格", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {},
};

二、表单校验rules的type属性；

2.1 type: ‘number’ 类型： [ transform属性，校验前进行类型转换 ]

type=“number” 类型；

需要配合 transform: (value) => Number(value)；校验前进行类型转换;

typeNumber: [
          {
            type: "number",
            message: "请输入数字[整数，小数，0，各种数字]",
            trigger: "blur",
            // 校验前进行数据类型处理;
            transform: (value) => Number(value),
          },
        ],

2.2枚举 type: ‘enum’ 类型：

type=“enum” 类型；

值必须存在于中 enum中；

如下：输入值必须是’aaa’ 或 ‘bbb’；

enum: [
          {
            type: "enum",
            enum: ["aaa", "bbb"],
            message: `值必须存在于中 enum`,
            trigger: "change",
          },
        ],

三、表单校验rules的whitespace属性；

验证是否只有空格；

whitespace: true ；

whitespace: [
  {whitespace: true, message: '只存在空格', trigger: 'blur'}
]

版权声明：本文为weixin_43101443原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/weixin_43101443/article/details/121121062