在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;
      }
    }
Logo

前往低代码交流专区

更多推荐