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

一、验证表单用法

1、表单布局及变量定义

	
        

          
xx号：{{ xxxOrderId }}
          

             xx地址：{{ aa变量 }} 
            
              复制
            
          
        
		
        
          
          
          
          
          
        
		
        
          
        
		
        
          {{
            xxxName ? xxxName : "-"
          }}
        
		
        
          {{ xxxObj.user?.xxxName }}-{{ xxxObj.user?.nickname }}
        
		
      

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

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

//定义表单数据交互dto变量
const formState = reactive({
  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。注意自定义校验器对象必须写在 表单使用验证规则对象 前面(上面)，否则可能会无法引用