Element-ui的使用（二）：Form表单（基本效验）

一、简单的Form使用及效验

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

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

1、效果图

2、分析

2.1、布局

              
                
              
              
                
              
              
                记住密码
                忘记密码？
               
              
                
                  登录
                  注册
                
              
            

分析：

2.2、基础效验
rules：表单验证规则

form常用验证属性：

hide-required-asterisk ：是否显示必填字段的标签旁边的红色星号

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

show-message：是否显示校验错误信息

• 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);
        });