element-ui中如何进行异步验证整个表单

Question

场景：登录
在点击登录按钮时会将数据发送到后台，后台会对数据进行校验，若尚末注册或帐号密码错误时会返回给前端错误信息，前端在拿到这个信息时如何使用element-ui或iview的验证功能将错误信息展现在页面中。

期望效果如下，错误信息由UI框架的验证层渲染

官网给出的异步示例不能符合项目实际需求，给出的示例是只要离开焦点就进行了对单个表单元素的验证

注：不是使用Message组件来实现错误提示！而是像第一张图中邮箱和域名输入框中没输入内容时UI框架的验证层提示的错误样式

Answer 1

1.前端也只能做一些模糊校验呢,
2.你需要的异步校验我的理解是前端发送数据到后台,后台校验是否存在账号,未存在提示用户注册,已存在校验密码是否正确,如果是这样你在前端可以做下模糊校验,像只能为数字和字母等
正则校验

let reg = /^[0-9a-zA-Z]+$/;
if(str&&!reg.test(str)){
 this.$message.warning('输入不是数字或者字母!');}

3.发送数据到后台,后台返回对应的标识,前端通过this.$message.warning('输入不是数字或者字母!');提示

Answer 2

给input标签添加一个失去焦点事件@blur设置一个布尔类型的中间变量,当失去焦点时,置为false,当中间变量为true时才提交,在点击登录时将中间变量设置为true

Answer 3

async submit() {

    try {
  //向服务器发送数据
    } catch (err) {
      this.$message({
        message: err.response.data,
        showClose: true,
        type: 'error'
      })
    }
  }
  
  用element ui 的“Message 消息提示”组件

Answer 4

觉得这一点vee-validate做得比较好，跟element-ui配合得还可以，其中data-vv-开头的为vee-validate的指令

    <el-form :model="loginForm" ref="loginForm" label-position="left" label-width="0px" class="login-container">
      <h3 class="title">JVUE-管理系统登录</h3>
      <el-form-item prop="account" :error="errors.first('account')">
        <el-input type="text" v-model.trim="loginForm.account" placeholder="账号" data-vv-name="account" v-validate
                  data-vv-rules="required||alpha_num||min:2" autofocus></el-input>
      </el-form-item>
      <el-form-item prop="password" :error="errors.first('password')">
        <el-input type="password" v-model="loginForm.password" auto-complete="off" data-vv-name="password" v-validate
                  data-vv-rules="required" placeholder="密码"></el-input>
      </el-form-item>
      <el-checkbox v-model="checked" class="remember">自动登录</el-checkbox>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:40%;" native-type="submit" @click.native.prevent="handleSubmit"
                   :loading="logining">登录
        </el-button>
      </el-form-item>
    </el-form>

this.$validator.validateAll().then(result => {
        if (result) {
          this.logining = true
          let loginParams = {
            username: this.loginForm.account,
            password: this.loginForm.password,
            remember: this.checked ? 1 : 0
          }
          this.self.login(loginParams).then((res) => {
            this.logining = false
            this.$message({
              showClose: true,
              duration: 1500,
              message: '登录成功'
            })
            // 初始化路由
            var path = this.$route.query.redirect
            this.$router.replace({path: path === '/' || path === undefined ? '/' : path})
          }).catch((err) => {
            this.logining = false
            this.$notify({
              title: '警告',
              message: err,
              type: 'warning',
              duration: 2500
            })
          })
        }
      }).catch(result => {
        this.$notify(messages.notifyCheckError())
      })

Answer 5

设置一个初始值，比如a=false，如果a是假值就不校验（直接callback()），如果是真值就callback(new Error('balabala'))

这个问题我认为解决楼主问题的关键在于文档里demo的验证会有两次，一次是rules里，比如change blur时候触发，另一次是在提交的时候主动this.$ref.form.validate一次。

所以在和后端交互那一步，如果比如用户名已经被占用，就把a的值设置为真，然后去this.$ref.form.validate一下

需要注意的是在完成上面的操作后，不要忘了把a置为初始值，否则之后就一直直接报错了，另外，推荐校验的事件为change而不是blur，因为用户编辑的时候是change，用blur的话用户在重新编辑那一项时候会一直保持错误信息，blur才消失。

欢迎指正~