form表单验证

form表单校验

//▇当有很多表单校验时，最好在mixins里新建一个js文件专门放置校验规则与方法
校验规则：

// ▇ 是否必须 required: true

// ▇ 校验type类型 type：'email'
// string
// number
// boolean
// email
// url
// date
// integer(必须是数字和整数类型)
// hex(十六进制)
// method
// regexp
// float:(必须是数字类型和浮点数)
// array:必须是array . isarray确定的数组
// object:类型必须是object，而不是Array.isArray
// any
// enum(枚举)

// ▇ 触发的方式trigger：['blur', 'change']

// ▇ 提示的信息 message: '请输入活动名称'

// ▇ 字符长短的限制 min: 3, max: 5, message: '长度在 3 到 5 个字符'

//对整个表单验证
<button class="btn-apply" @click="submit('form')">继续填写单位代表信息登记表填充</button>

submit(form) {
//validate对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。Function(callback: Function(boolean, object))
      this.$refs[form].validate((valid, obj) => {
        if (valid) {
          sessionStorage.setItem('ruleForm', JSON.stringify(this.form))
          this.$router.push({
            path: '/memberRegister/groupDelegate',
            query: { title: '单位社会团体' },
          })
        }  
      })
    },
//clearValidate 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果 Function(props: array | string)
//图片上传成功后，校验无法去掉，用clearValidate!!(如下图) ↓↓

 handleAvatarSuccess(res) { //图片上传成功函数
      this.form.copiesUrl = `${process.env.VUE_APP_DEVELOPMENT_SERVER_URL}/public${res.data.url}`
      this.$refs.copiesUrl.clearValidate('copiesUrl') //找到这个dom， 去掉这个prop校验
},