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的指令&nbsp; &nbsp; <el-form :model="loginForm" ref="loginForm" label-position="left" label-width="0px" class="login-container">&nbsp; &nbsp; &nbsp; <h3 class="title">JVUE-管理系统登录</h3>&nbsp; &nbsp; &nbsp; <el-form-item prop="account" :error="errors.first('account')">&nbsp; &nbsp; &nbsp; &nbsp; <el-input type="text" v-model.trim="loginForm.account" placeholder="账号" data-vv-name="account" v-validate&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data-vv-rules="required||alpha_num||min:2" autofocus></el-input>&nbsp; &nbsp; &nbsp; </el-form-item>&nbsp; &nbsp; &nbsp; <el-form-item prop="password" :error="errors.first('password')">&nbsp; &nbsp; &nbsp; &nbsp; <el-input type="password" v-model="loginForm.password" auto-complete="off" data-vv-name="password" v-validate&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data-vv-rules="required" placeholder="密码"></el-input>&nbsp; &nbsp; &nbsp; </el-form-item>&nbsp; &nbsp; &nbsp; <el-checkbox v-model="checked" class="remember">自动登录</el-checkbox>&nbsp; &nbsp; &nbsp; <el-form-item style="width:100%;">&nbsp; &nbsp; &nbsp; &nbsp; <el-button type="primary" style="width:40%;" native-type="submit" @click.native.prevent="handleSubmit"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;:loading="logining">登录&nbsp; &nbsp; &nbsp; &nbsp; </el-button>&nbsp; &nbsp; &nbsp; </el-form-item>&nbsp; &nbsp; </el-form>this.$validator.validateAll().then(result => {&nbsp; &nbsp; &nbsp; &nbsp; if (result) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.logining = true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let loginParams = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; username: this.loginForm.account,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; password: this.loginForm.password,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; remember: this.checked ? 1 : 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.self.login(loginParams).then((res) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.logining = false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$message({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; showClose: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; duration: 1500,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; message: '登录成功'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 初始化路由&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var path = this.$route.query.redirect&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$router.replace({path: path === '/' || path === undefined ? '/' : path})&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }).catch((err) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.logining = false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$notify({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: '警告',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; message: err,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'warning',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; duration: 2500&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }).catch(result => {&nbsp; &nbsp; &nbsp; &nbsp; this.$notify(messages.notifyCheckError())&nbsp; &nbsp; &nbsp; })

Answer 4

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