element-ui中如何進(jìn)行異步驗(yàn)證整個(gè)表單

1.前端也只能做一些模糊校驗(yàn)?zāi)?
2.你需要的異步校驗(yàn)我的理解是前端發(fā)送數(shù)據(jù)到后臺(tái),后臺(tái)校驗(yàn)是否存在賬號(hào),未存在提示用戶注冊(cè),已存在校驗(yàn)密碼是否正確,如果是這樣你在前端可以做下模糊校驗(yàn),像只能為數(shù)字和字母等
正則校驗(yàn)

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

3.發(fā)送數(shù)據(jù)到后臺(tái),后臺(tái)返回對(duì)應(yīng)的標(biāo)識(shí),前端通過(guò)this.$message.warning('輸入不是數(shù)字或者字母!');提示

async submit() {

    try {
  //向服務(wù)器發(fā)送數(shù)據(jù)
    } catch (err) {
      this.$message({
        message: err.response.data,
        showClose: true,
        type: 'error'
      })
    }
  }
  
  用element ui 的“Message 消息提示”組件

給input標(biāo)簽添加一個(gè)失去焦點(diǎn)事件@blur設(shè)置一個(gè)布爾類(lèi)型的中間變量,當(dāng)失去焦點(diǎn)時(shí),置為false,當(dāng)中間變量為true時(shí)才提交,在點(diǎn)擊登錄時(shí)將中間變量設(shè)置為true

覺(jué)得這一點(diǎn)vee-validate做得比較好，跟element-ui配合得還可以，其中data-vv-開(kāi)頭的為vee-validate的指令

    <el-form :model="loginForm" ref="loginForm" label-position="left" label-width="0px" class="login-container">
      <h3 class="title">JVUE-管理系統(tǒng)登錄</h3>
      <el-form-item prop="account" :error="errors.first('account')">
        <el-input type="text" v-model.trim="loginForm.account" placeholder="賬號(hào)" 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">自動(dòng)登錄</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())
      })