Vue表单提交正则表达式验证使用案例

一、验证表单用法

1、表单布局及变量定义

	<el-form
        label-position="Right"
        :rules="sendRules"
        label-width="150px"
        :model="formState"
        ref="sendFormRef"
      >
        <div>
          <h4>xx号：{{ xxxOrderId }}</h4>
          <div style="margin: 25px 0">
            <span> xx地址：{{ aa变量 }} </span>
            <span style="color: #1abc9c; margin-left: 12px" @click="onCopyAddr">
              复制
            </span>
          </div>
        </div>
		
        <el-table
          :data="orderDetailVoList"
          style="width: 100%; margin-bottom: 15px"
        >
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="属性1" label="列名2" width="250" />
          <el-table-column prop="属性2" label="列名3" width="100" />
          <el-table-column prop="属性3" label="列名4" width="80" />
          <el-table-column prop="属性4" label="列名5" />
        </el-table>
		
        <el-form-item label="xxx单号：" prop="xxxNo">
          <el-input
            v-model="formState.xxxNo"
            maxlength="100"
            type="text"
          />
        </el-form-item>
		
        <el-form-item label="xxx名称：" prop="backAddress">
          <span>{{
            xxxName ? xxxName : "-"
          }}</span>
        </el-form-item>
		
        <el-form-item label="xxx操作员：">
          {{ xxxObj.user?.xxxName }}-{{ xxxObj.user?.nickname }}
        </el-form-item>
		
      </el-form>

2、定义表单中用到的实例、变量、交互dto等

//定义表单实例变量
const sendFormRef = ref<FormInstance>();

//定义表单数据交互dto变量
const formState = reactive<any>({
  xxxNo: "",
  xxxName: "",
  xxxAddress: "",
});

//定义表单验证规则对象
const sendRules = {
  xxxNo: [
    {
      required: true,
      message: "请输入xxx号",
      trigger: ["blur", "change"],
    }
  ],
};

3、验证规则表达式

//校验器
const validateXxxNo = (rule: any, value: any, callback: any) => {
  const reg = /^[a-zA-Z0-9]+$/;
  if (!reg.test(value)) {
    callback(new Error("xxx单号限输入字母、数字，不可输入特殊字符及空格!"));
  } else {
    callback();
  }
};

//表单使用验证规则对象
const sendRules = {
  xxxNo: [
    {
      required: true,
      message: "请输入xxx单号",
      trigger: ["blur", "change"],
    },
    {
      min: 6,
      max: 40,
      message: "xxx单号位数限制6-40位字符!",
      trigger: ["blur", "change"],
    },
    {
      validator: validateXxxNo,
      trigger: ["blur", "change"],
    }
  ],
};

说明：
1、sendRules 是表单使用的验证规则对象
2、属性 xxxNo 是具体校验那个属性字段
3、属性 required 非空校验
4、属性 message 提示字样
5、属性 trigger 触发事件
6、属性 min、max 输入字符最小、最大长度限制
7、属性 validator 为自定义校验器，示例校验器为 validateXxxNo。注意自定义校验器对象必须写在 表单使用验证规则对象 前面(上面)，否则可能会无法引用