vue2+elementui 非空验证失效
账号登录模块的失焦验证能正常工作，但是短信登录模块失效了
再次切换回账号登录模块，它的失焦验证也不工作了
<html>
<head>
<title>登录</title>
<script src="./js/vue.js"></script>
<script src="./elementui/index.js"></script>
<script src="./js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="./elementui/theme-chalk/index.css">
<style scoped>
.login-page{
background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.login-title{
font-size: 20px;
}
.box-card {
width: 375px;
}
.login_title span{
margin: 0 20px 0 20px;
cursor: pointer;
}
.login_title span:hover{
color: #333;
font-weight: bolder;
}
.isActiveTitle{
color: #333;
font-weight: bolder;
}
.login_title{
text-align: center;
margin: 10px 20px 20px 20px;
font-size: 18px;
color: #666;
}
</style>
</head>
<body>
<div id="app">
<template>
<div class="login-page">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span class="login-title">🔐药品管理系统</span>
</div>
<div class="login-form">
<p class="login_title">
<span :class="isActiveIndex == 0 ? 'isActiveTitle' : ''" @click="accountLogin">账号登录</span><!-- 利用三元运算符判定点击了哪个登录,从而绑定样式 -->
<span :class="isActiveIndex == 1 ? 'isActiveTitle' : ''" @click="smsLogin">短信登录</span>
</p>
<el-form :model="loginForm" :rules="loginRules" ref="loginForm" v-if="isActive">
<el-form-item prop="account">
<el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="请输入用户名">
<template slot="prepend"><i style="font-size:20px" class="el-icon-user"></i></template>
</el-input>
</el-form-item>
<el-form-item prop="pwd">
<el-input type="password" v-model="loginForm.pwd" auto-complete="off" placeholder="请输入密码">
<template slot="prepend"><i style="font-size:20px" class="el-icon-key"></i></template>
</el-input>
</el-form-item>
<el-form-item>
<el-button style="width:100%;" type="primary" @click="handleLogin" :loading="loading">登录</el-button>
</el-form-item>
</el-form>
<el-form v-else :model="loginForm2" :rules="loginRules2" ref="loginForm2" >
<el-form-item prop="phone">
<el-input type="text" v-model="loginForm2.phone" auto-complete="off" placeholder="请输入手机号码">
<template slot="prepend"><i style="font-size:20px" class="el-icon-mobile-phone"></i></template>
</el-input>
</el-form-item>
<el-form-item prop="code">
<el-input type="text" v-model="loginForm2.code" auto-complete="off" placeholder="请输入验证码">
<template slot="prepend"><i style="font-size:20px" class="el-icon-message"></i></template>
</el-input>
</el-form-item>
<el-form-item>
<el-button style="width:100%;" type="primary" @click="handleLogin" :loading="loading">登录</el-button>
</el-form-item>
</el-form>
</div>
</el-card>
</div>
</template>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
loading: false,
loginRules:{
account: [
{ required: true, message: '请输入账户', trigger: 'blur' },
],
pwd: [
{ required: true, message: '密码不能为空', trigger: 'blur'}
]
},
loginRules2:{
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
],
code: [
{ required: true, message: '请输入验证码', trigger: 'blur'}
]
},
isActive: true, // 用于实现切换登录，作为判断
isActiveIndex: 0,
loginForm: {
account: '',
pwd: ''
},
loginForm2: {
phone: '',
code: ''
}
},
methods:{
handleLogin(){
if(isActiveIndex == 0){
this.$refs.loginForm.validate().then(()=>{
this.loading = true;
$.post("Admins_AccountsServlet?tag=login",{
account: this.loginForm.account,
pwd: this.loginForm.pwd
},function (data) {
if(data.code == 200){
window.location.href = "index";
}else{
this.$message({
message: data.msg,
type: 'warning'
});
}
},"json");
}).catch((error=>{
this.$message({
message: '输入错误！',
type: 'warning'
});
}))
}else{
this.$refs.loginForm2.validate().then(()=>{
})
}
},
accountLogin() { // 账号登录
this.isActive = true;
this.isActiveIndex = 0
},
smsLogin() { // 短信登录
this.isActive = false;
this.isActiveIndex = 1
},
}
});
</script>
</html>
- 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7563618
- 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：vue2.x+elementui2.x构建后台管理系统-登陆界面的实现
- 除此之外, 这篇博客: 【vue考试功能】vue-elementul实现试题录入功能，组件形式封装版，直接复制就能用【详细注释，清晰明了】中的 前言： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
本帖子是根据vue和elementul写出来的。直接告诉你们使用方法，直接创建一个点vue文件复制代码放进去，然后把文件引入到你的项目内，注册组件就可以用了。当然里面也有详细注释，一步步解释写法逻辑，让不熟悉这个功能的小伙伴可以先复制了直接用着，然后看注释理解原理。
没有下载elementul的自己下一哈
npm i element-ui -S- 您还可以看一下 杜从文老师的vue-element-admin开发后台权限模块课程中的 后台权限页面的制作小节, 巩固相关知识点
- 以下回答由chatgpt基于相关博客总结生成:
根据提供的参考资料来看，问题可能出在表单校验上。根据你的描述，短信登录模块和账号登录模块的失焦验证都失效了。下面我将给出一种可能的解决方案：
首先，在你的Vue组件中，你需要定义一个data属性（比如叫做
isSmsLogin），用来标识当前是短信登录模块还是账号登录模块，以决定失焦验证的行为。然后，在表单验证的规则中，根据
isSmsLogin的值来决定是启用失焦验证还是禁用失焦验证。具体操作如下：- 在
data中添加isSmsLogin属性，初始值为false（账号登录模块）。 - 在
rules中，为不同的验证项的trigger属性添加一个动态的值，如下所示： - 在短信登录模块的验证项中，将
trigger属性设置为blur、change（启用失焦验证和变化验证）。 - 在账号登录模块的验证项中，将
trigger属性设置为change（仅启用变化验证）。 这样，在短信登录模块中，表单验证将会在失焦事件和内容改变事件触发时进行，而在账号登录模块中，将仅在内容改变事件触发时进行验证。
下面是一个示例代码：
export default { data() { var checkMobile = (rule, value, callback) => { if (this.isSmsLogin) { // 短信登录模块的验证规则 // ... } else { // 账号登录模块的验证规则 // ... } }; return { isSmsLogin: false, // 初始为账号登录模块 rules: { mobile: [ { validator: checkMobile, trigger: 'blur,change' } ], // 其他验证项... } }; }, methods: { switchModule() { this.isSmsLogin = !this.isSmsLogin; // 切换登录模块 } } };在上面的代码中，我们定义了一个
checkMobile方法来处理手机号验证。在该方法中，根据isSmsLogin的值来决定使用不同的验证逻辑。然后，将checkMobile作为mobile验证项的validator属性的值。最后，你需要在切换登录模块的时候更新
isSmsLogin的值，可以通过一个按钮或其他方式来触发切换。上面的示例代码中提供了一个switchModule方法用于切换登录模块。希望以上解决方案能够对你有所帮助，如果有更多细节或其他问题，请随时提问。
- 在
131行 if(isActiveIndex == 0) 应该写成 if(this.isActiveIndex == 0)