• vue爬坑之路--------this$refs[formName]validate


    vue element-ui使用自定义正则表达式:

    let validatePass = (rule, value, callback) => {
         let regExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
         if (value === '') {
            callback(new Error('请输入密码'))
         } else if (regExp.test(value) === false) {
           callback(new Error('8-16字母和数字组成,不能是纯数字或纯英文'))
         } else {
            if (this.ruleForm.repass !== '') {
              this.$refs.ruleForm.validateField('repass')
            }
              callback()
         }
    }
    注册提交按钮事件:
    submitForm (formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                let _this = this
                this.$ajax.post('请求地址', _this.ruleForm)
                  .then((response) => {
                    this.$message.success('注册成功!')
                    this.$refs[formName].resetFields()
                    //  跳转到登录页
                    this.$router.push({path: '/'})
                  })
              } else {
                console.log('error submit!!')
                return false
              }
            })
    }

    首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form。
    其次在拿到了正确的form后,检查该form上添加的表单验证是否正确,需要注意的点有:

      1. el-form rules,model属性绑定,ref标识

      2. el-form-item prop属性绑定

  • 相关阅读:
    【博弈论】囚徒困境
    【LTE与5G】
    【现代通信技术】绪论
    【操作系统】 逻辑结构
    【密码学】
    【计算机网络】网络应用
    部署docker仓库-Harbor
    ELK+filebeat收集K8S平台日志
    istio-http流量管理
    K8S集群部署istio
  • 原文地址:https://www.cnblogs.com/loveAline/p/8528286.html
Copyright © 2020-2023  润新知