element-ui表单验证实例

约定不等于承诺〃 2023-10-06 17:52 14阅读 0赞

<template>
      <div class="main">
        <div class="login">
          <el-form
            size="mini"
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="账号" prop="loginId">
              <el-input v-model="ruleForm.loginId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="loginPwd">
              <el-input
                type="password"
                v-model="ruleForm.loginPwd"
                autocomplete="off"
              ></el-input>
            </el-form-item>
    
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >登录</el-button
              >
              <el-button @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
    
    <script>
    export default {
          
      data() {
          
        //验证登录名
        var validateLoginId = (rule, value, callback) => {
          
          if (value === "") {
          
            callback(new Error("请输入登录名"));
          }else {
          
              callback();
            }
        };
        //验证密码
        var validateLoginPwd = (rule, value, callback) => {
          
          if (value === "") {
          
            callback(new Error("请输入密码"));
          }else {
          
              callback();
            }
        };
        return {
          
          //表单输入数据
          ruleForm: {
          
            loginId: "",
            loginPwd: "",
          },
          //表单验证数据
          rules: {
          
            loginId: [{
           validator: validateLoginId, trigger: "blur" }],
            loginPwd: [{
           validator: validateLoginPwd, trigger: "blur" }],
          },
        };
      },
      methods: {
          
        //表单提交方法
        submitForm(formName) {
          
            //判断表单数据是否验证成功
          this.$refs[formName].validate((valid) => {
          
            //验证成功
            if (valid) {
          
              alert("submit!");//可以改成请求api
            } else {
          
            //验证失败
              console.log("error submit!!");
              return false;
            }
          });
        },
        //表单重置方法
        resetForm(formName) {
          
          this.$refs[formName].resetFields();
          console.log(this.ruleForm);
        },
      },
    };
    </script>
    
    <style scoped>
    .main {
          
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    .login {
          
      width: 460px;
      height: 220px;
      border: 1px solid#ccc;
    }
    </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210530111950327.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng==,size_16,color_FFFFFF,t_70