Growing Hacker 2023-07-02 16:47 采纳率: 94.4%
浏览 32
已结题

vue2+elementui 非空验证失效

账号登录模块的失焦验证能正常工作，但是短信登录模块失效了

img

img

img


再次切换回账号登录模块，它的失焦验证也不工作了


<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>
  • 写回答

2条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-07-02 18:30
    关注
    • 这个问题的回答你可以参考下: 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的值来决定是启用失焦验证还是禁用失焦验证。具体操作如下：

      1. 在data中添加isSmsLogin属性，初始值为false（账号登录模块）。
      2. 在rules中，为不同的验证项的trigger属性添加一个动态的值，如下所示：
      3. 在短信登录模块的验证项中，将trigger属性设置为blur、change（启用失焦验证和变化验证）。
      4. 在账号登录模块的验证项中，将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方法用于切换登录模块。

      希望以上解决方案能够对你有所帮助，如果有更多细节或其他问题，请随时提问。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 7月11日
  • 已采纳回答 7月3日
  • 创建了问题 7月2日

悬赏问题

  • ¥15 Mac版Fiddler Everywhere4.0.1提示强制更新
  • ¥15 android 集成sentry上报时报错。
  • ¥50 win10链接MySQL
  • ¥35 跳过我的世界插件ip验证
  • ¥15 抖音看过的视频，缓存在哪个文件
  • ¥15 自定义损失函数报输入参数的数目不足
  • ¥15 如果我想学习C大家有是的的资料吗
  • ¥15 根据文件名称对文件进行排序
  • ¥15 deploylinux的ubuntu系统无法成功安装使用MySQL❓
  • ¥15 有人会用py或者r画这种图吗