vue3中表单校验_vue3 表单校验

一、用vant组件的van-field

        1.v-model的时候加上.trim去掉首尾空格

        2.@blur的时候校验当前输入框是否有特殊字符。

<van-field placeholder="请输入姓名" @blur="regInputInvalid" v-model.trim="temporary.basicInfo.name" label="姓名"/>

二、正则表达式

export const pattern = /[`!！@#$%^&*()_+=\[\]{};':"\\|,，.。<《>》\/?？—·~]/;
export const patternTel = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;

三、@blur的方法

//输入框失去焦点时判断输入是否非法，如果非法则存储
export function regInputInvalid(e:IBaseObject){
    //输入框的值
  let val=e.target.value
    //输入框的label
  let spanText=e.target.labels[0].innerText
  let arr1,arr=ss_getItem('isInputInvalid') || []
  let obj =<IBaseObject> getVeriInputObj(val,spanText)
    //存储的数据前判断之前是否有对此输入框进行校验存储过，有则改为最新的，没有就加进去
  if(arr.length>0){
    let flag=arr.some((item:IBaseObject)=>item.label===spanText)
    if(flag){
      arr.forEach((item:any)=>{
        if(item.label===spanText){
          for(let key in item){
            item[key]=obj[key]
          }
        }
      })
    }else{
      arr.push(obj)
    }
  }else{
    arr.push(obj)
  }
//筛选出校验未通过的Obj重新存储
  arr1=arr.filter((item:IBaseObject)=>{
    return !item.status
  })
  ss_setItem('isInputInvalid', arr1);
}

//获取输入框校验后的obj
export  function getVeriInputObj(val:string,spanText:string){
  let obj = {
    label: spanText,
    status: true,
    text: ''
  }
  if (val.length > 255) {
    showFailToast(`${spanText}字符不能大于255`);
    obj={
      label:spanText,
      status:false,
      text:`${spanText}字符不能大于255`
    }
  }else{
    if(spanText.indexOf('电话')>-1){
      if(!patternTel.test(val)){
        showFailToast(`${spanText}格式不对`);
        obj={
          label:spanText,
          status:false,
          text:`${spanText}格式不对`
        }
      }
    }else{
      if(pattern.test(val)){
        showFailToast(`${spanText}不能有特殊字符`);
        obj={
          label:spanText,
          status:false,
          text:`${spanText}不能有特殊字符`
        }
      }
    }
  }
  return obj
}

四、在每个表单提交的方法中先进行判断该页面的输入框是否都符合要求

1.提交方法

 async submit(){
    //校验不通过就返回
        if(!checkInputInvalid()){
          return;
        }
    ……………………………………
}

2.校验的方法

export const checkInputInvalid = () => {
  let arr=ss_getItem('isInputInvalid')
  if(arr.length>0){
    showFailToast(ss_getItem('isInputInvalid')[0].text)
    return false;
  }else{
    return true;
  }
}

五、置空处理

1.在每次登录的时候、路由跳转的时候设置（避免用户返回进入其它页面的表单操作时报错）

 
  ss_setItem('isInputInvalid',[])