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(){
this.$refs.loginForm.validate().then(()=>{
this.loading = true;
//模拟异步请求后台接口 登录操作
setTimeout(()=>{
this.$router.push('/home');
this.loading = false;
}, 1000)
}).catch((error=>{
this.$message({
message: '输入错误！',
type: 'warning'
});
}))
},
accountLogin() { // 账号登录
this.isActive = true;
this.isActiveIndex = 0
},
smsLogin() { // 短信登录
this.isActive = false;
this.isActiveIndex = 1
},
}
});
</script>
</html>
账号登录页面添加了form表单的校验，而短信登录页面没有添加form表单的校验，所以没有触发非空校验。
handleLogin方法里需要添加
this.$refs.loginForm2.validate().then(()=>{})
并且，需要在handleLogin方法内添加判断
if(isActiveIndex == 0){
this.$refs.loginForm.validate().then(()=>{})
}else{
this.$refs.loginForm2.validate().then(()=>{})
}
- 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7396603
- 这篇博客你也可以参考下：vue2.x+elementui2.x构建后台管理系统-登陆界面的实现
- 除此之外, 这篇博客: vue-elementul实现表格求和以及求平均值方法，最简单的方法中的 老规矩，先上效果图 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
这是拿到了需要的数据打印后看到的结果- 您还可以看一下 杜从文老师的vue-element-admin开发后台权限模块课程中的 后台权限页面的制作小节, 巩固相关知识点
- 以下回答由chatgpt基于相关博客总结生成:
根据参考资料中提供的信息，问题可能是由于Element UI的验证不生效导致的。在Vue2的项目中，Element UI提供了一些验证功能，可以在表单中使用。根据问题描述，非空验证无法触发，可能是在短信登录页面中的验证配置有问题。解决该问题的具体步骤如下：
- 确保在短信登录页面的模板代码中，已经正确使用了Element UI的验证组件，例如
el-input组件，并设置了相应的验证规则。例如，你可以使用required规则进行非空验证。
示例代码：
<el-form> <el-form-item prop="phone"> <el-input v-model="phone" placeholder="请输入手机号"></el-input> </el-form-item> </el-form>- 在Vue组件的
data中定义一个phone属性，并绑定到输入框中的v-model上。
示例代码：
data() { return { phone: '' } }- 在Vue组件的
methods中定义一个方法，用于提交表单。在该方法中，通过调用Element UI的validate方法进行验证。
示例代码：
methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 表单验证通过，执行提交操作 // 可以在这里发送表单数据到后端进行登录操作 } else { // 表单验证失败，提示用户填写正确的信息 alert('请填写正确的手机号') } }) } }- 在模板中调用提交表单的方法，例如通过点击按钮来触发。
示例代码：
<el-form ref="form" :model="phone" size="small"> <el-form-item prop="phone"> <el-input v-model="phone" placeholder="请输入手机号"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form>通过以上步骤，可以在短信登录页面中实现非空验证。如果上述步骤已经正确实施，但仍然无法触发验证，可能是由于其他因素导致的，并需要进一步排查。
- 确保在短信登录页面的模板代码中，已经正确使用了Element UI的验证组件，例如