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

觉得这一点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 4

async submit() {

    try {

  //向服务器发送数据

    } catch (err) {

      this.$message({

        message: err.response.data,

        showClose: true,

        type: 'error'

      })

    }

  }

  

  用element ui 的“Message 消息提示”组件