关于表单校验,:rules=“loginRules“

 在写好validator相关的方法后,rule测试没有生效

<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"

<el-form-item prop="username">

<el-input

          ref="username"

          v-model="loginForm.username"

          placeholder="Username"

          name="username"

<template><div class="login-container"><el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left"><div class="title-container"><h3 class="title">Login Form</h3></div><el-form-item prop="username"><span class="svg-container"><svg-icon icon-class="user" /></span><el-inputref="username"v-model="loginForm.username"placeholder="Username"name="username"type="text"tabindex="1"auto-complete="on"/></el-form-item><el-form-item prop="password"><span class="svg-container"><svg-icon icon-class="password" /></span><el-input:key="passwordType"ref="password"v-model="loginForm.password":type="passwordType"placeholder="Password"name="password"tabindex="2"auto-complete="on"@keyup.enter.native="handleLogin"/><span class="show-pwd" @click="showPwd"><svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /></span></el-form-item><el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button><div class="tips"><span style="margin-right:20px;">username: admin</span><span> password: any</span></div></el-form></div>
</template><script>
import { validUsername } from '@/utils/validate'
import { v4 as uuidv4 } from 'uuid';
export default {name: 'Login',data() {const validateUsername = (rule, value, callback) => {if (!validUsername(value)) {callback(new Error('Please enter the correct user name'))} else {callback()}}const validatePassword = (rule, value, callback) => {if (value.length < 6) {callback(new Error('The password can not be less than 6 digits'))} else {callback()}}return {loginForm: {username: 'admin',password: '111111'},loginRules: {username: [{ required: true, trigger: 'blur', validator: validateUsername }],password: [{ required: true, trigger: 'blur', validator: validatePassword }]},loading: false,passwordType: 'password',redirect: undefined}},watch: {$route: {handler: function(route) {this.redirect = route.query && route.query.redirect},immediate: true}},methods: {showPwd() {if (this.passwordType === 'password') {this.passwordType = ''} else {this.passwordType = 'password'}this.$nextTick(() => {this.$refs.password.focus()})},handleLogin() {var a = uuidv4();this.$refs.loginForm.validate(valid => {if (valid) {this.loading = truethis.$store.dispatch('user/login', this.loginForm).then(() => {this.$router.push({ path: this.redirect || '/' })this.loading = false}).catch(() => {this.loading = false})} else {console.log('error submit!!')return false}})}}
}
</script><style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */$bg:#283443;
$light_gray:#fff;
$cursor: #fff;@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {.login-container .el-input input {color: $cursor;}
}/* reset element-ui css */
.login-container {.el-input {display: inline-block;height: 47px;width: 85%;input {background: transparent;border: 0px;-webkit-appearance: none;border-radius: 0px;padding: 12px 5px 12px 15px;color: $light_gray;height: 47px;caret-color: $cursor;&:-webkit-autofill {box-shadow: 0 0 0px 1000px $bg inset !important;-webkit-text-fill-color: $cursor !important;}}}.el-form-item {border: 1px solid rgba(255, 255, 255, 0.1);background: rgba(0, 0, 0, 0.1);border-radius: 5px;color: #454545;}
}
</style><style lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;.login-container {min-height: 100%;width: 100%;background-color: $bg;overflow: hidden;.login-form {position: relative;width: 520px;max-width: 100%;padding: 160px 35px 0;margin: 0 auto;overflow: hidden;}.tips {font-size: 14px;color: #fff;margin-bottom: 10px;span {&:first-of-type {margin-right: 16px;}}}.svg-container {padding: 6px 5px 6px 15px;color: $dark_gray;vertical-align: middle;width: 30px;display: inline-block;}.title-container {position: relative;.title {font-size: 26px;color: $light_gray;margin: 0px auto 40px auto;text-align: center;font-weight: bold;}}.show-pwd {position: absolute;right: 10px;top: 7px;font-size: 16px;color: $dark_gray;cursor: pointer;user-select: none;}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/135929.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#对图片Image转换为Bitmap并解析图片中的条码

首先&#xff0c;你需要安装ZXing.Net库。你可以通过NuGet包管理器来安装。 using ZXing; using ZXing.Common; using ZXing.QrCode; public class Test {public string DecodeBarcode(Bitmap bitmap) { var reader new BarcodeReader(); var result reader.Decode(b…

基于站点、模式、遥感多源降水数据融合实践技术应用

降水在水循环中发挥着重要作用&#xff0c;塑造了生态景观和生态系统。目前&#xff0c;有四种主要方式获取降水数据&#xff1a;1&#xff09;雨量计观测&#xff0c;2&#xff09;地基雷达遥感&#xff0c;3&#xff09;卫星遥感&#xff0c;4&#xff09;模式模拟。基于雨量…

K8s----资源管理

目录 一、Secret 1、创建 Secret 1.1 用kubectl create secret命令创建Secret 1.2 内容用 base64 编码&#xff0c;创建Secret 2、使用方式 2.1 将 Secret 挂载到 Volume 中&#xff0c;以 Volume 的形式挂载到 Pod 的某个目录下 2.2 将 Secret 导出到环境变量中 二、Co…

LeetCode_多源 BFS_中等_2258.逃离火灾

目录 1.题目2.思路3.代码实现&#xff08;Java&#xff09; 1.题目 给你一个下标从 0 开始大小为 m x n 的二维整数数组 grid &#xff0c;它表示一个网格图。每个格子为下面 3 个值之一&#xff1a; 0 表示草地。1 表示着火的格子。2 表示一座墙&#xff0c;你跟火都不能通过…

Linux中使用Shell脚本安装jdk

1&#xff0c;了解安装步骤 &#xff08;1&#xff09;进入到server目录 &#xff08;2&#xff09;解压jdk压缩包文件 &#xff08;3&#xff09;配置JAVA_HOME变量、PATH变量、CLASSPATH变量 &#xff08;4&#xff09;要让环境变量立刻生效执行source命令 &#xff08;5&am…

租用网站服务器的六大指标

相信很多人对网站服务器租用6个重要指标都不太了解&#xff0c;下面壹基比小鑫为你详细解释一下这个问题&#xff0c;希望对你有一定的帮助 服务器租用&#xff0c;是指由IDC服务商提供硬件&#xff0c;负责基本软件的安装、环境配置&#xff0c;负责服务器上基本服务功能的正…

邦芒解析:领导暗示你离职的话语和行为

领导暗示你离职的话语和行为&#xff0c;有时候在职场中&#xff0c;如果领导想让你离职的话&#xff0c;一般不会直接和你说&#xff0c;像这种得罪人的事情&#xff0c;他们一般会用暗示的方法。以下是领导暗示你离职的话语和行为 ​ ​1、有你不多&#xff0c;没你不少 这…

你别说,还真好用,Apipost-IDEA插件

写完代码还得重复打字编写接口文档&#xff1f;代码量大定位接口定义方法太难找&#xff1f;麻烦&#xff01;写完代码还得复制粘贴到postman进行调试&#xff1f; 这三点太麻烦&#xff1f;今天给大家推荐一款IDEA插件&#xff0c;写完代码IDEA内一键生成API文档&#xff0c;…

工业物联网模块应用之砂芯库桁架机器人远程无线控制

一、应用背景 在铸管车间无线技改项目中&#xff0c;客户需要构建智能化砂芯库&#xff0c;要求各库存的规格、数量、位置坐标等数据实时可显。此外&#xff0c;还需具备自动入库及出库功能&#xff0c;用于将出炉后的成摞砂芯及时码放至砂芯库的预设位置&#xff0c;当离心机…

深度学习(CNN+RNN)笔记2

文章目录 第五课&#xff1a;序列模型(Sequence Models)第一周&#xff1a;循环神经网络&#xff08;Recurrent Neural Networks&#xff09;【序列模型、语言模型序列生成、对新序列采样。RNN、GRU、LSTM、双向RNN、深度RNN】第二周&#xff1a;自然语言处理与词嵌入&#xff…

管理视频推广工作:新媒体团队的成功策略

目前的新媒体团队&#xff0c;在视频管理时呈现出多、杂、散的特点&#xff0c;如何有效管理视频素材是当下许多新媒体团队的管理痛点&#xff0c;也是管理要点。高效的视频推广管理是新媒体团队提升产出效率的关键。 那么新媒体行业该如何管理视频推广工作&#xff1f; 数据…

day12-内核与文件系统衔接流程

static int __init kernel_init(void * unused) init_post(); init_post()&#xff1a; 这是内核启动应用程序的接口 static noinline int init_post(void) {/* need to finish all async __init code before freeing the memory */async_synchronize_full();free_init…

Spring-循环依赖简述

什么是循环依赖 // A依赖了B class A {public B b; } ​ // B依赖了A class B {public A a; } ​ // 循环依赖 A a new A(); B b new B(); a.b b; b.a a; 对象之间的相互依赖很正常&#xff0c;但是在Spring中由于对象创建要经过Bean的生命周期&#xff0c;所以就有了循环…

浅谈智能变电站自动化系统的应用与产品选型

安科瑞电气股份有限公司 上海嘉定 201801 摘要&#xff1a;现如今&#xff0c;智能变电站发展已经成为了电力系统发展过程中的内容&#xff0c;如何提高智能变电站的运行效率也成为电力系统发展的一个重要目标&#xff0c;为了能够更好地促进电力系统安全稳定运行&#xff0c;…

ubuntu安装rabbitMQ 并 开启记录消息的日志

apt-get update apt-get install rabbitmq-server rabbitmqctl add_user root password // 设置用户名密码 rabbitmqctl set_user_tags root administrator // 设置为管理员身份 rabbitmqctl set_permissions -p / root ".*" ".*" ".*" //为…

【Head First 设计模式】-- 策略模式

一、背景 Head First 设计模式第一章设计模式入门–策略模式 二、工具箱的工具&#xff08;本章&#xff09; 1、OO基础 封装 继承 多态 抽象 2、OO原则 封装变化 面向接口编程&#xff0c;而非面向实现编程 组合优于继承 3、OO模式 策略模式&#xff0c;所谓策略模式就是定义…

使用 Wireshark 抓包工具快速分析 IoT 物联网终端设备的网络通信行为

当你进行 IoT 物联网开发过程中&#xff0c;终端-MQTT 服务器-业务系统-App 全链路联调时往往难以快速定位问题&#xff1a;终端可能未正常发出消息报文&#xff0c;也可能在网络传输中丢失&#xff0c;也可能被 MQTT 服务器限流丢弃&#xff0c;或者业务系统处理异常而丢失。此…

QT第2课-GUI程序实例分析

GUI程序开发概述 不同的操作系统GUI开发原理相同不同的操作系统GUI SDK 不同 GUI 程序开发原理 GUI程序在运行时会创建一个消息队列系统内核将用户的键盘鼠标操作翻译成对应的程序消息程序在运行过程中需要实时处理队列中的消息当队列中没有消息时&#xff0c;程序将处于停滞…

基于 HarmonyOS 的 HTTPS 请求过程开发示例(ArkTS)

介绍 本篇 Codelab 基于网络模块以及 Webview 实现一次 HTTPS 请求&#xff0c;并对其过程进行抓包分析。效果如图所示&#xff1a; 相关概念 ● Webview&#xff1a;提供 Web 控制能力&#xff0c;Web 组件提供网页显示能力。 ● HTTP数据请求&#xff1a;网络管理模块&am…

《JavaScript设计模式》笔记 - - - 超全设计模式概览

该篇文章用于记录阅读《JavaScript设计模式》后归纳的读书笔记&#xff0c;主要以代码形式进行展示&#xff0c;用于快速回顾对应设计模式的代码构造 1.面向对象编程 1.使用对象收编变量 优点&#xff1a;避免全局变量冲突与覆盖 缺点&#xff1a;不利于复用 var CheckObj {c…