vue element form表单组件登录验证

代码:

<template>
  <div class="login">
    <div class="loginRight">
      <img
        src="../assets/image/login/江山ico 1.png"
        alt=""
      >
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="loginForm"
        class="demo-ruleForm"
      >

        <el-form-item prop="userName">
          <el-input
            placeholder="请输入用户名"
            v-model="ruleForm.userName"
            style="marginTop:35px;"
            clearable
          >
            <i slot="prefix">
              <img
                style="marginTop:8px;"
                src="../assets/image/login/user.png"
                alt
              />
            </i>
          </el-input>
        </el-form-item>

        <el-form-item prop="passward">
          <el-input
            placeholder="请输入密码"
            v-model="ruleForm.passward"
            style="marginTop:20px;"
            show-password
            clearable
          >
            <i slot="prefix">
              <img
                style="marginTop:8px;"
                src="../assets/image/login/lock.png"
                alt
              />
            </i>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            style="marginTop:55px;"
            @click="goLogin()"
          >登陆</el-button>
        </el-form-item>
      </el-form>
      <!-- 此处只展示账户密码,如果需要验证码或是注册要手机号性别等,可以在el-form-item里面照猫画虎 -->
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    loading: false,
    ruleForm: {
      userName: '',
      passward: '',
    },
    rules: {
      userName: [
        { required: true, message: '用户名不能为空!', trigger: 'blur' },
        // { pattern: '/^[a-zA-Z0-9_-]{4,16}$/', message: '4到16位（字母，数字，下划线，减号）' }//配置正则
      ],
      passward: [
        { required: true, message: '密码不能为空!', trigger: 'blur' },
        // { pattern: '/^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/', message: '最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符' }
      ]
    }
  }),
  methods: {
    goLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 如果正则,输入账号信息无误,进行接口请求,跳转路由
          this.loading = true
          localStorage.setItem('userInfo', JSON.stringify({ userName: this.ruleForm.userName, passward: this.ruleForm.passward }))
          setTimeout(() => {
            this.$router.push('/screencontainer/totallargescreen')
          }, 1000)
        } else {
          this.$alert('请输入正确用户名和密码格式!', {
            confirmButtonText: '确定',
            center: true
            // callback: action => {
            //   this.$message({
            //     type: 'info',
            //     // message: `action: ${action}`
            //   });
            // }
          });
          return false;
        }
      });
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.el-form-item {
  margin-bottom: 0px;
}
.login {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 940px;
  height: 502px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: url("../assets/image/login/Group 2.png") center no-repeat;
  .loginRight {
    width: 280px;
    height: 350px;
    // border: 1px solid red;
    margin-right: 80px;
    text-align: center;
    button {
      text-align: center;
      width: 280px;
      height: 45px;
      border-radius: 4px;
      opacity: 1;
      background: rgba(7, 93, 173, 1);
      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3);
      color: rgba(169, 206, 241, 1);
      font-size: 16px;
      font-weight: 700;
      font-family: "Montserrat";
    }
  }
}
</style>

效果如下:

成功:(可自行配置正则)

验证:

失败: