在写好validator相关的方法后,rule测试没有生效
<el-form-item prop="username">
ref="username"
v-model="loginForm.username"
placeholder="Username"
name="username"
- "login-container">
-
"loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left"> -
- "title-container">
-
"title">Login Form
-
-
-
"username"> - "svg-container">
-
"user" /> -
-
- ref="username"
- v-model="loginForm.username"
- placeholder="Username"
- name="username"
- type="text"
- tabindex="1"
- auto-complete="on"
- />
-
-
-
"password"> - "svg-container">
-
"password" /> -
-
- :key="passwordType"
- ref="password"
- v-model="loginForm.password"
- :type="passwordType"
- placeholder="Password"
- name="password"
- tabindex="2"
- auto-complete="on"
- @keyup.enter.native="handleLogin"
- />
- "show-pwd" @click="showPwd">
-
"passwordType === 'password' ? 'eye' : 'eye-open'" /> -
-
-
-
"loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login -
- "tips">
- "margin-right:20px;">username: admin
- password: any
-
-
-
-
-
- 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 = true
- this.$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
- }
- })
- }
- }
- }
-
- /* 修复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;
- }
- }
-
-
相关阅读:
[附源码]Python计算机毕业设计SSM京津冀区域产学研项目管理信息系统(程序+LW)
学完Python,不做程序员,只接兼职,哎,就是玩儿
js省市树状结构数据
边界框回归的魔法:揭秘精准高效的MPDIoU损失函数
多模态 多引擎 超融合 新生态!2023亚信科技AntDB数据库8.0产品发布
netty的selector工作原理
【Python】对中文排序
crlfuzz&crlfsuite
详解FreeRTOS:FreeRTOS任务挂起过程源码分析(进阶篇—3)
不同字符编码对比
-
原文地址:https://blog.csdn.net/Take_the_ape/article/details/134300304