一、驗證表單用法

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>();

//定義表單數(shù)據(jù)交互dto變量
const formState = reactive<any>({
  xxxNo: "",
  xxxName: "",
  xxxAddress: "",
});

//定義表單驗證規(guī)則對象
const sendRules = {
  xxxNo: [
    {
      required: true,
      message: "請輸入xxx號",
      trigger: ["blur", "change"],
    }
  ],
};

3、驗證規(guī)則表達式

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

//表單使用驗證規(guī)則對象
const sendRules = {
  xxxNo: [
    {
      required: true,
      message: "請輸入xxx單號",
      trigger: ["blur", "change"],
    },
    {
      min: 6,
      max: 40,
      message: "xxx單號位數(shù)限制6-40位字符!",
      trigger: ["blur", "change"],
    },
    {
      validator: validateXxxNo,
      trigger: ["blur", "change"],
    }
  ],
};

說明：
1、sendRules?是表單使用的驗證規(guī)則對象
2、屬性?xxxNo?是具體校驗?zāi)莻€屬性字段
3、屬性 required?非空校驗
4、屬性?message?提示字樣
5、屬性?trigger?觸發(fā)事件
6、屬性?min、max?輸入字符最小、最大長度限制
7、屬性?validator?為自定義校驗器，示例校驗器為?validateXxxNo。注意自定義校驗器對象必須寫在 表單使用驗證規(guī)則對象?前面(上面)，否則可能會無法引用文章來源地址http://www.zghlxwxcb.cn/news/detail-600390.html

到了這里，關(guān)于Vue表單提交正則表達式驗證使用案例的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！