使用elementUI的form表单写一个登录验证练习

下面是我今天使用element UI的form表单写的一个登录验证的小练习。下面分三个部分来回顾这个练习。

一、展示

这是我的登录UI：

二、具体代码（带注释）

<template>
  <div id="pageA">
  <!--:model=""  命名绑定的这个表单
	:rules=""  命名这个这个表单的规则
	label-width=""  表单的item的label字段的宽度，比如这里的“用户名”和“密码”呈现占有的宽度
	status-icon  输入完时，input框末尾的状态图标
	ref=""  命名这个dom节点-->
    <el-form
      :model="loginForm"
      :rules="loginRules"
      label-width="100px"
      status-icon
      ref="loginForm"
    >
      <!-- .trim 处理空格，这里为禁止输入空格 -->
      <el-form-item label="用户名" prop="userName">
        <el-input
          style="width: 200px"
          v-model.trim="loginForm.userName"
          placeholder="请输入8-11个字符"
        ></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="userPwd">
        <el-input
          style="width: 200px"
          type="password"
          v-model.trim="loginForm.userPwd"
          aria-autocomplete="off"
          placeholder="请输入您的密码"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="isLogin()">登录</el-button>
        <el-button @click="restForm('loginForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    // es5的用法
    // var validatePass = function (rule, value, callback) {
    //   if (/^[^@]*@[^@]*$/.test(value)) {
    //     callback();
    //   } else {
    //     callback(new Error("请按要求输入"));
    //   }
    // };
	//es6的用法
    var validatePass = (rule, value, callback) => {
      if (/^[^@]*@[^@]*$/.test(value)) {			//有且只能出现一次@符号
        callback();
      } else {
        callback(new Error("请按要求输入"));
      }
    };
    return {
      loginForm: {
        userName: "",
        userPwd: "",
      },
      // required:会否必填   message：没有达到rules的msg  trigger：'blur'失去焦点时触发（用来配合msg触发后但没填显示msg）
      //pattern:使用正则验证   [^adgk]:查找给定集合外的任何字符  ^[^a]*a[^a]*$ 这个正则的意思是有且只能出现一次a
      loginRules: {
        userName: [
          { required: true, message: "请输入用户名" },
          { min: 8, max: 11, message: "请输入8-11个字符" },
        ],
        userPwd: [
          { required: true, message: "请输入密码" },
          { validator: validatePass },
        ],
      },
    };
  },
  methods: {
    isLogin() {
      this.$refs["loginForm"].validate((valid) => {
        if (valid) {
          this.login();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    login() {
      return new Promise((resolve) => {
        console.warn("登录触发");
        setTimeout(() => {
          console.warn("登录成功");
          resolve({ userName: this.loginForm.userName });
        }, 3000);
      });
    },
    restForm(loginForm) {
      this.$refs[loginForm].resetFields();
    },
  },
};
</script>

<style scoped>
</style>

三、登录按钮验证实现逻辑步骤

使用自定义校验validator

1. 在声明使用自定义校验：
   在需要自定义校验的字段里面添加 validator: 校验方法名（见上面的data里的return里的loginRules的userPwd）

		userPwd: [
          { required: true, message: "请输入密码" },
          { validator: validatePass },
        ],

2. 定义校验规则（下面为伪代码），一定要有callback()

	var validatePass = (rule, value, callback) => {
      if (value为真) {
        callback();
      } else {
        callback(new Error("错误提示");
      }
    };

3. 点击确认，执行validate事件 （下面伪代码）

	isLogin() {
      this.$refs["上面表单ref的命名"].validate((valid) => {
        if (valid) {	//如果valid为真，则代表验证通过，执行通过的内容
          //执行提交接口
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

四、官方相关文档描述

---