一、简单的Form使用及效验

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据

在此以登录案例作为分析使用

1、效果图

2、分析

2.1、布局

<el-form :rules="loginRules" hide-required-asterisk :show-message="false">
              <el-form-item label="用户名" prop="username">
                <el-input
                  v-model="user.username"
                  placeholder="请输入用户名"
                  clearable
                  prefix-icon="el-icon-user-solid"
                  @blur="usernameBlur"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="passwd">
                <el-input
                  v-model="user.passwd"
                  placeholder="请输入密码"
                  show-password
                  prefix-icon="el-icon-s-goods"
                  @blur="passwdBlur"
                ></el-input>
              </el-form-item>
              <el-row type="flex" justify="space-between">
                <el-checkbox v-model="loginChecked">记住密码</el-checkbox>
                <el-link :underline="false">忘记密码？</el-link>
              </el-row> 
              <el-form-item>
                <el-row type="flex" justify="space-between">
                  <el-button type="success" @click="btn_login">登录</el-button>
                  <el-button type="primary" @click="btn_register">注册</el-button>
                </el-row>
              </el-form-item>
            </el-form>

分析：

• 表单form设置hide-required-asterisk就隐藏红色星号（不用绑定或者赋值）
  

• show-message如果不取消将会一直显示在输入框下方
  

• 如上图原生的验证会出现一些弊端：
  1、message提示信息会一直显示
  2、输入值后失去焦点并不能判断输入框是否有值，并关闭提示信息
  3、进入登录界面直接输入值之后，也会弹出提示

• 以上问题严重印象了用户的使用好感，所以作出如下解决方法：
  1、设置show-message = “false”不会提示下方文字，输入框边框会变红
  2、手动判断输入框失去焦点事件@bulr
  

用户名输入框效验：

usernameBlur() {
      console.log("name：" + this.user.username);
      if (this.user.username != null) {
        this.loginRules.username[0].required = false;
      }
      if (this.user.username == null || this.user.username == "") {
        this.loginRules.username[0].required = true;
        this.showMassage("请输入用户名！");
      }
    }

密码输入框效验：

passwdBlur() {
      console.log("pass:" + this.user.passwd);
      if (this.user.passwd != null && this.user.passwd.length >= 3) {
        this.loginRules.passwd[0].required = false;
      } else {
        this.showMassage("密码大于三位！");
      }
      if (this.user.passwd == null || this.user.passwd == "") {
        this.loginRules.passwd[0].required = true;
        this.showMassage("请输入密码！");
      }
    }

原理：失去焦点时判断输入框是否有值，如果有值则将效验的规则required关闭，反之则打开
细节：当输入框没有输入值的时候输入框的值是undefined，当输入值之后又将值清空输入框的值是空,所以在判断的时候都要加上判断
2.3、弹出框提示

   /**
     * 错误验证提示框
     */
    showMassage(content) {
      this.$message({
        showClose: true,
        message: content,
        type: "error",
        duration:1000
      });
    }

在效验的时候调用提示框（传值）方法就可以了

2.4、调用网络接口完全登录的整个Form效验

RequestLogin(this.user)
        .then(res => {
          if (res.data.resultCode == 1) {
            that.$store.dispatch("SAVELOGINUSER", that.user); //保存登录信息
            that.$router.replace({ name: "usermassage" }); //router到查看用户界面
            // console.log(`登录成功！`);
          } else {
            that.showMassage("用户名/密码错误！");
          }
        })
        .catch(err => {
          that.showMassage(err);
        });