vue中使用elementui中表单验证规则,async和await异步函数处理

在el-form表单中添加规则:rules=“rules”,
给所需要表单规则验证的属性添加prop属性
(在el-form-item中 加上prop,然后在输入框内的输入的值和它要双向绑定)

 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
            <el-form-item label="用  户" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="密  码" prop="password">
              <el-input type="password"  v-model="ruleForm.password" show-password></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="loginconfirm()" :loading="loading">登录</el-button>
            </el-form-item>
          </el-form>

在data数据层中定义rules规则

 ruleForm: {
          name:'',
          password:''
      },
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
      }

对于每个表单规则验证的提交表单方法
登录要用到异步函数处理的话,要写在表单校验函数里面

 async userLogin(){
      const valid = await this.$refs.ruleForm.validate().catch(err => err);
      if (valid===true) {
        this.loading=true;
      //调用后台接口
          let response = await GetLogin(config.action_userLogin.action,config.action_userLogin.method,{
            SubBusID: config.action_userLogin.SubBusID,
            Param: content,
            user_id: config.user_id,
            sign: getMD5(content),
            TID:"",
            CTag:""
          });
          if(response){
            this.loading=false;
            if(response.status=='200'){
              if(response.data.ReslutCode=='1'){
                this.$message({
                    showClose: true,
                    message: '登录成功',
                    type: 'success'
                  });
                  this.$router.push('/gh');
              }else{
                this.$message({
                    showClose: true,
                    message: response.data.ResultMessage,
                    type: 'error'
                });
              }
            }
          }
      } else {
        console.log('error submit!!');
        return false;
      }
    }
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 ,setup 函数可以使用 async/await 进行异步操作。在表单验证,你可以使用 async/await 来等待异步验证结果。 下面是一个简单的例子: ``` <template> <form @submit.prevent="submitForm"> <div> <label for="username">Username:</label> <input type="text" v-model="username"> <div v-if="usernameError">{{ usernameError }}</div> </div> <div> <label for="password">Password:</label> <input type="password" v-model="password"> <div v-if="passwordError">{{ passwordError }}</div> </div> <button type="submit">Submit</button> </form> </template> <script> import { ref } from 'vue'; export default { setup() { const username = ref(''); const password = ref(''); const usernameError = ref(''); const passwordError = ref(''); const validateUsername = async () => { if (!username.value) { usernameError.value = 'Username is required'; } else { usernameError.value = ''; } }; const validatePassword = async () => { if (!password.value) { passwordError.value = 'Password is required'; } else { passwordError.value = ''; } }; const submitForm = async () => { await validateUsername(); await validatePassword(); if (!usernameError.value && !passwordError.value) { // Submit the form } }; return { username, password, usernameError, passwordError, submitForm, }; }, }; </script> ``` 在这个例子,我们使用ref 来创建响应式的变量,然后定义了两个异步的验证函数 validateUsername 和 validatePassword,这些函数会根据输入的值设置相应的错误信息。 在 submitForm 函数,我们使用了 await 来等待异步验证结果。如果两个验证都通过了,就可以提交表单了。 注意,需要使用 await 来等待异步验证结果,否则 submitForm 函数会在异步验证结果还未返回时就执行完毕,无法正确处理验证结果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值