做这个表单验证做了我一个世纪 赶紧做下记录 。。。。。。

 

就一个简单的表单 但是需求是

1.在提交的时候才做验证 离开输入框的时候就算有错误也不会提示 没有红色的错误提示

2.是按顺序校验的 就算我是最后是输入密码然后离开 但是依然是从账号到密码依次去校验

3. 是弹出提示框 而不是红色的错误项 

 

然后 我就开始了无穷无尽的试错

vant 文档 Vant 2 - Mobile UI Components built on Vue

关于表单校验是说需要用rules 所以我的第一版是直接写rules和验证规则 但是这样就不能放弹窗的 //有可以的告诉我一声。。。。

第一版的校验的代码：可以校验 但是不能按顺序 输入密码离开 然后如果用户名不对 还是只会校验密码 笨版本

<van-form class="form" @submit="onSubmit" validate-trigger="onSubmit" ref="loginForm" :show-error="false">
      <van-field placeholder="请输入账号" name="username" v-model.trim="loginForm.username" :rules="[{validator:usernameValidator}]"></van-field>
      <van-field placeholder="请输入密码" name="password" v-model.trim="loginForm.password" type="password" :rules="[{validator:passwordValidator}]"></van-field>
      <div class="btn">
        <van-button block color="#21b97a" class="loginBtn" native-type="submit">登录</van-button>
      </div>
    </van-form>

data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      userNamePattern: /^[a-zA-Z0-9]{5,8}$/,
      passwordPattern: /^[a-zA-Z0-9]{5,12}$/
    }
  }

usernameValidator (val) {
      if (val === '') {
        Toast('用户名和密码不能为空')
        return false
      }
      if (!this.userNamePattern.test(val)) {
        Toast('用户名为5-8位数字和字母')
        return false
      }
      return new Promise((resolve, reject) => {
        true
      })
    },
    passwordValidator (val) {
      if (val === '') {
        return Toast('用户名和密码不能为空')
      }
      if (!this.passwordPattern.test(val)) {
        return Toast('密码5-12位数字和字母')
      }
      return true
    }

然后我开始了百度之旅

我的比较接近成功的一版是这样的

把button的按钮改成了type="button" 绑定一个点击事件是click=”test“

这版是升级版了 这版不能和vant的onsubmit事件关联上 但是给了我promise用法的启发 

第一版之所以不能用 就是因为这个顺序问题 但是promise可以解决顺序问题

test () {
      const res = new Promise((resolve, reject) => {
        if (this.loginForm.username === '') {
          Toast('用户名和密码不能为空')
          return resolve(false)
        } else if (!this.userNamePattern.test(this.loginForm.username)) {
          Toast('用户名为5-8位数字和字母')
          return resolve(false)
        } else if (this.loginForm.password === '') {
          Toast('用户名和密码不能为空')
          return resolve(false)
        } else if (!this.passwordPattern.test(this.loginForm.password)) {
          Toast('密码5-12位数字和字母')
          return resolve(false)
        } else {
          return resolve(true)
        }
      })
      console.log(res)
    },

结合文档的异步校验 

最终版方案如下

html

<van-form class="form" @submit="onSubmit" validate-trigger="onSubmit" ref="loginForm" :show-error="false">
      <van-field placeholder="请输入账号" name="username" v-model.trim="loginForm.username" :rules="[{validator:usernameValidator}]"></van-field>
      <van-field placeholder="请输入密码" name="password" v-model.trim="loginForm.password" type="password" :rules="[{validator:passwordValidator}]"></van-field>
      <div class="btn">
        <van-button block color="#21b97a" class="loginBtn" native-type="submit">登录</van-button>
      </div>
    </van-form>

js

data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      userNamePattern: /^[a-zA-Z0-9]{5,8}$/,
      passwordPattern: /^[a-zA-Z0-9]{5,12}$/
    }
  }

methods: {
    usernameValidator (val) {
      return new Promise((resolve, reject) => {
        if (val === '') {
          Toast('用户名和密码不能为空')
          return resolve(false)
        } else if (!this.passwordPattern.test(val)) {
          Toast('密码5-12位数字和字母')
          return resolve(false)
        } else {
          return resolve(true)
        }
      })
    },
    passwordValidator (val) {
      return new Promise((resolve, reject) => {
        if (val === '') {
          Toast('用户名和密码不能为空')
          return resolve(false)
        } else if (!this.userNamePattern.test(val)) {
          Toast('用户名为5-8位数字和字母')
          return resolve(false)
        } else {
          return resolve(true)
        }
      })
    }
}

呜呜撒花 虽然还没完全做完登录但是一个晚上的纠结解决了 yeah