【校验】el-form校验 数字 字母 （pattern写法）

<template>
  <div>
    <!-- <my-table :data="dataForm3">
      <el-table-column label="商品" prop="name"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
    </my-table> -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      ref="formInline"
      :rules="rules"
    >
      <el-form-item label="活动区域0" prop="name">
        <el-input v-model="formInline.name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="活动区域1" prop="where">
        <el-input v-model="formInline.where" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="活动区域2" prop="who">
        <el-input v-model="formInline.who" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('formInline')"
          >查询子组件</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "formInline",

  data() {
    var validator1 = (rule, val, callback) => {
      if (!val) {
        callback(new Error("请输入"));
      } else {
        const reg = /^([0-9]+([/]|[-]|[ ])?)*$/;
        if (reg.test(val)) {
          return callback();
        } else {
          callback(new Error("格式错误，仅支持输入纯数字、空格、“-”、“/”"));
        }
      }
    };
    var validator2 = (rule, val, callback) => {
      if (!val) {
        callback(new Error("请输入"));
      } else {
        const reg = /^([a-zA-z]+|[0-9]+|[0-9a-zA-z])*$/; //
        if (reg.test(val)) {
          return callback();
        } else {
          callback(new Error("格式错误，仅支持输入纯数字、字母"));
        }
      }
    };
    var validator3 = (rule, val, callback) => {
      if (!val && !this.formLabelAlign.phone) {
        callback(new Error("请输入"));
        return false;
      }
      const reg = /^[0-9]([0-9-[ ]]?)*$/;
      if (reg.test(val)) {
        callback();
      } else {
        callback(new Error("格式错误，仅支持输入纯数字、空格、“-”"));
      }
    };
    return {
      dataForm3: [
        { id: "ida1111", name: "测试数据名称1", price: "测试数据地址1" },
        { id: "ida1112", name: "测试数据名称2", price: "测试数据地址2" },
        { id: "ida1113", name: "测试数据名称3", price: "测试数据地址3" },
        { id: "ida1114", name: "测试数据名称4", price: "测试数据地址4" },
        { id: "id1a15", name: "测试数据名称5", price: "测试数据地址5" },
      ],
      rules: {
        name: [{ required: true, validator: validator1, trigger: "blur" }],
        where: [{ required: true, validator: validator2, trigger: "blur" }],
        who: [{ required: true, validator: validator3, trigger: "change" }],
      },
      formInline: {
        name: "",
        where: "",
        who: "",
      },
    };
  },
  mounted() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>

pattern写法

 rules: [{
            required: true,
            message: '请选择服务类型',
            trigger: "blur"
          },
          {
            min: 3,
            max: 5,
            message: "长度在 3 到 5 个字符",
            trigger: "blur"
          },
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: '请输入数字，保留2位小说',
          },
        ],
      },