vue3表单验证2

一、template中代码

<li class="mt-5 mb-5" v-for="(item,index) in layer.list" :key="index">
            <span class="layer-title" :class="{must:item.must}">{{ item.title }}：</span>
            <a-input
              v-if="item.type==='input'"
              v-model:value="item.value"
              :placeholder="item.placeholder"
              class="w-250 ml-10 mr-25"
              :class="item.value&&item.reg&&!item.regResult?'err':''"
              @blur="verify(item,'blurItem')"
              />
            <a-textarea
              v-if="item.type==='area'"
              v-model:value="item.value"
              :placeholder="item.placeholder"
              class="w-250 ml-10 mr-25"
              :auto-size="{ minRows: 2, maxRows: 5 }"
            />
            <a-cascader
              class="w-250 ml-10 mr-25"
              v-if="item.type==='treeSelect'"
              v-model:value="item.value"
              :options="item.option"
              expand-trigger="hover"
              :placeholder="item.placeholder"
              :changeOnSelect="true"
              :field-names="{ label: 'name', value: 'gridId', children: 'children' }" />
            <a-input :placeholder="item.placeholder" class="readonly w-250 ml-10 mr-25" @click="layer.showMapLayer" v-if="item.type==='map'" readonly v-model:value="item.value"/>

</li>


    <my-choose-point v-model:show="layer.list.lnglat.isShowMap" v-model:lngLat="layer.list.lnglat.value"></my-choose-point>

二、列表代码

layer：{
    list:{
          pointName:{title:'点位名称',type:'input',placeholder:'请输入点位名称',value:'',defaultValue:'',must:true},
          gridId:{title:'区域',type:'treeSelect',placeholder:'请选择区域',value:[],defaultValue:[],must:true,option:[]},
          lnglat:{title:'经纬度',type:'map',placeholder:'请点此获取经纬度',value:'',defaultValue:'',must:true,isShowMap:false},
          director:{title:'负责人',type:'input',placeholder:'请输入负责人',must:false,value:'',defaultValue:''},
          phone:{title:'联系电话',type:'input',placeholder:'请输入联系电话',must:false,value:'',defaultValue:'',errText:'请输入正确的电话号码',reg:['phone','tel'],regResult:true},
        },
}

三、页面提交时

async submitLayer(){
          let verifyResult = verify(state.layer.list)
          if(!verifyResult) return;
          state.layer.showLayer=false
          if(state.handleType===EButtonType.edit){
            await state.updatePointSupplies()
          }else if(state.handleType===EButtonType.add){
            await state.addPointSupplies()
          }
          state.layer.close()
        }

四、校验正则

export const checkType = (val: any, type: string): boolean => {
  switch (type) {
    case "phone": // 手机号码
      return /^1[3|4|5|6|7|8|9][0-9]{9}$/.test(val);
    case "tel": // 座机
      return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(val);
    case "card": // 身份证
      return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val);
    case "pwd": // 密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线
      return /^[a-zA-Z]\w{5,17}$/.test(val);
    case "postal": // 邮政编码
      return /[1-9]\d{5}(?!\d)/.test(val);
    case "qq": // QQ号
      return /^[1-9][0-9]{4,9}$/.test(val);
    case "email": // 邮箱
      return /^[\w-]+(.[\w-]+)*@[\w-]+(.[\w-]+)+$/.test(val);
    case "ip": // IP
      return /((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))/.test(val);
    case "date": // 日期时间
      return /^(\d{4})-(\d{2})-(\d{2}) (\d{2})(?::\d{2}|:(\d{2}):(\d{2}))$/.test(val) || /^(\d{4})-(\d{2})-(\d{2})$/.test(val);
    case "english": // 英文
      return /^[a-zA-Z]+$/.test(val);
    case "chinese": // 中文
      return /^[\u4E00-\u9FA5]+$/.test(val);
    case "lower": // 小写
      return /^[a-z]+$/.test(val);
    case "upper": // 大写
      return /^[A-Z]+$/.test(val);
    case "html": // HTML标记
      return /<("[^"]*"|'[^']*'|[^'">])*>/.test(val);
    case "array": // 是否Array
      return Object.prototype.toString.call(val) === "[object Array]";
    case "object": // 是否Object
      return Object.prototype.toString.call(val) === "[object Object]";
    case "emptyObject": // 是否空对象
      return checkType(val, "object") && Object.keys(val).length === 0;
    case "string": // 是否String
      return Object.prototype.toString.call(val) === "[object String]";
    case "number": // 是否Number
      return Object.prototype.toString.call(val) === "[object Number]" && val === val; // eslint-disable-line
    case "regExp": // 是否RegExp
      return Object.prototype.toString.call(val) === "[object RegExp]";
    case "file": // 是否File
      return Object.prototype.toString.call(val) === "[object File]";
    case "blob": // 是否Blob
      return Object.prototype.toString.call(val) === "[object Blob]";
    case "undefined": // 是否undefined
      return val === undefined;
    case "null": // 是否null
      return val === null;
    case "function": // 是否function
      return typeof val === "function";
    case "window": // 是否window
      return val === window;
    default:
      return true;
  }
};

五、校验方法

/*校验：示例
* phone:{title:'电话',type:'input',placeholder:'请输入电话',value:'',defaultValue:'',must:true,errText:'请输入正确的电话号码',reg:['phone','tel'],regResult:true},
* */
export const verify = function (list: IBaseObject, type: string = '') {
  let errMessage = ''
  if (type === 'blurItem') { //输入框失去焦点
    if (list.value && list.reg) {
      list.regResult = list.reg.find(item1 => {
        return checkType(list.value, item1)
      })
      if (!list.regResult) {
        errMessage = list.errText
      }
    }
  } else {//弹框确认提交时校验
    for (let key in list) {
      if (typeof (list[key].value) === 'string') {
        list[key].value = list[key].value.trim()
      }
      if (list[key].must && ((!list[key].value && (list[key].value + '') !== '0') || list[key].value?.length === 0)) {
        errMessage = "请检查带'*'号必填项是否填写完整！"
        break
      }
      if (list[key].value && list[key].reg) {
        if (!list[key].regResult) {
          errMessage = list[key].errText
          break
        }
      }
    }
  }
  if (errMessage !== '') {
    message.error({
      content: () => errMessage,
      class: 'custom-class',
      style: {
        marginTop: '20vh',
      },
    });
    return false;
  } else {
    return true
  }
}

六、close清空为默认值

close(){
          for(let key in state.layer.list){
            state.layer.list[key].value = state.layer.list[key].defaultValue
          }
        },