el-form-item 组件单独设置当前表单项校验规则（自定义校验规则）+正则校验

el-form-item 组件单独设置当前表单项校验规则（自定义校验规则）

• el-form 表单验证日常写法
  • 直接在 el-form 组件中写 rules 属性定义校验规则，
  • el-form-item 组件上写 props 属性用来传入 el-form 组件中 model 中对应的字段，
• 公司有封装好的表单组件又未包含上传文件组件（封装的表单组件中每个表单项的校验规则不是在一个对象中写的，是在当前表单项设置属性中写的），
  • 需要在封装好的表单组件中使用 插槽 来写上传图片的表单项，
  • 如果此时需要设定上传图片 必填 ，则需要在 el-form-item 组件上定义上传图片的校验规则 rules 。

【注意】表单验证一定要在 el-form-item 组件中加上属性 prop

 <el-form-item
   v-if="dialogType !== 'detail'"
   prop="pic"
   label="上传图片:"
   slot="otherFormItem"
   :rules="picRules"
   >
       <el-upload>
       ...
       </el-upload>
   </el-form-item>

 // 上传校验规则
 picRules: [
   {
     required: true,
     message: '请上传图片',
     // trigger: 'change',
     validator: this.picValidator
   }
   // { validator: picValidator }
 ],

  /**** 自定义校验规则 ****/
  picValidator(rule, value, callback) {
    if (this.fileArr.length === 0) {
      callback(new Error('校验：请上传图片')) // 一定要写 callBack() 验证完成时调用的回调函数 https://github.com/yiminghe/async-validator
    } else {
      callback()
    }
  },

补充

1.密码校验

密码至少包含大写字母、小写字母、数字和特殊字符中的三种，6-18位

// 密码校验
pwValidateHandler(rules, value, callback) {
  console.log('value----', value)
  // 密码至少包含大写字母、小写字母、数字和特殊字符中的三种
  const pwReg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,16}$/
  if(value && (value.length < 8 || value.length > 16)){
    callback(new Error('密码长度8-16位')) // 单独判断，避免提示语太长
  } else if(pwReg.test(value)) {
    callback()
  } else {
    callback(new Error('密码至少包含大写字母、小写字母、数字和特殊字符中的三种'))
  }
}

正则校验

rules: [{ pattern: /^[0-9]*$/, message: '仅支持输入大于0的数字' }],