[微信小程序]表单正则验证（通用）

不一样又怎样

于 2023-11-13 17:10:08 发布

阅读量561

点赞数 1

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/xxx_holic123/article/details/134381790

版权

1.添加rules验证规则（仿elementUI）

let rules = {
  dispose: [{
      required: true,
      message: "请填写处置量"
    },
    {
      pattern: /^0\.([1-9]|\d[1-9])$|^[1-9]\d{0,6}\.\d{0,2}$|^[1-9]\d{0,6}$/,
      message: "只支持输入8位（包括小数2位）整数"
    }
  ], //处置凭证
  disposeAttachList: [{
    required: true,
    message: "请选择处置凭证"
  },
  {min:1,max:9,message: "请选择1-9张处置凭证"}
], //处置凭证
  disposeDate: [{
    required: true,
    message: "请选择处置日期"
  }], //处置日期
  disposeWay: [{
      required: true,
      message: "请填写处置去向"
    },
    {
      min: 1,
      max: 100,
      message: "请输入1-100位的处置去向"
    }
  ]
}

2.绑定input或其他组件error.['双向绑定数据名']为message显示

<el-input title="处置去向" model:my-value="{{disposeWay}}" placeholder="请填写" errorMessage="{{error.disposeWay}}" onlyRead="{{onlyRead}}"></el-input>

组件封装详情见另外文章

3.提交时循环验证

  formSubmit() {
    //表单验证
    let flag = 0
    if (this.selectComponent('#upload3').data.files) {
      this.setData({
        disposeAttachList: this.selectComponent('#upload3').data.files
      })
    }
    for (const key in rules) {
      for (const item of rules[key]) {
          if(item.required && !JSON.stringify(this.data[key])){
            this.setData({
              [`error.${key}`]: item.message
            })
            flag++
            break
        }else if(item.min && (this.data[key].length<item.min||this.data[key].length>item.max)){
          this.setData({
            [`error.${key}`]: item.message
          })
          flag++
            break
          }else if(item.pattern && !item.pattern.test(this.data[key])){
          this.setData({
            [`error.${key}`]: item.message
          })
          flag++
          break
        }
        else if(item.space && (/\s/.test(this.data[key]))){
          this.setData({
            [`error.${key}`]: item.message
          })
          flag++
          break
        }
        else{
          this.setData({
            [`error.${key}`]: ""
          })
        }
      }
    }
    if(flag==0){
    //发请求

    }
  },