vue3中表单校验

最新推荐文章于 2025-04-17 17:33:12 发布

_大龄

最新推荐文章于 2025-04-17 17:33:12 发布

阅读量2.4k

点赞数

文章标签： javascript vue.js java

本文链接：https://blog.youkuaiyun.com/weixin_59017683/article/details/130638536

版权

文章讲述了在使用VantUI组件库时，如何对van-field进行首尾空格处理和特殊字符校验。通过正则表达式定义了字符和电话号码的格式，并在输入框失去焦点时执行校验方法。当表单提交时，会检查所有输入是否符合要求，若存在不符合规则的输入，则展示错误提示并阻止表单提交。此外，还涉及了登录和路由跳转时的置空处理，以避免错误信息的保留。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、用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.在每次登录的时候、路由跳转的时候设置（避免用户返回进入其它页面的表单操作时报错）