vue表单输入框md5正则表达式验证

首先在vue文件中写一个方法判断当输入框中不为空时且不满足正则表达式 或者 长度大于32时返回错误信息

MD5RegularCheck(e) {
  const MD5text= /[0-9a-fA-F]{32}/
  if ((e.target.value && !MD5text.test(e.target.value)) || e.target.value.length >32) {
    const arr = [{
      message: '格式不正确!',
    }]
    //设置表单字段依旧显示为输入的内容，如果将value: e.target.value删除那出现错误就会清空输入框
    this.form.setFields({ MD5Fields: {  value: e.target.value,errors: arr } })
    //不满足条件时不将此value绑定（解决错误时点击搜索访问接口时携带此不正确文本）
    this.searchForm.MD5 = null
  }
}

this.form.setFields需要再data中设置一个参数form: this.$form.createForm(this),

输入框在鼠标失焦状态调用方法并且添加:form="form" 属性

<a-form class="ant-advanced-search-form" :form="form" :colon="false" v-show="!showVulnerabilityList">
<a-form-item label="MD5值">
  <a-input
      placeholder=""
      v-model="searchForm.MD5"
      @change="searchForm.MD5= searchForm.MD5.replace(/[, ]/g, '')"
      v-decorator="[
        'MD5Fields',
        {
          rules: [
            { required: false, message: '请填写！' }]
        }
      ]"
      @blur="MD5RegularCheck"
  />
</a-form-item>

 注意事项：

  this.form.setFields对以下两个地方进行了声明

 因为是对输入框进行了添加id属性并且写数据到输入框中，且有报错信息，如果想清空文本以及错误信息可以在重置按钮触发的方法中添加如下代码：

this.form.setFields({ MD5Fields: {}})