Javaweb登录页面使用JQuery循环判断输入框不能为空

做一道光

已于 2022-05-21 17:18:14 修改

阅读量1.4k

点赞数 2

分类专栏：封装的控件 javaWeb 文章标签： jquery javascript 前端

于 2022-05-19 19:58:34 首次发布

本文链接：https://blog.csdn.net/weixin_59334478/article/details/124870026

版权

javaWeb 同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

封装的控件

7 篇文章 0 订阅

订阅专栏

当用户名输入框和密码输入框、验证码输入框什么都不输入时，点击登录弹出弹窗显示用户名不能为空

当只输入密码不输入用户名和验证码时，点击登录弹出弹窗显示用户名不能为空

当只输入用户名不输入密码时，验证码也没有输入时，显示密码不能为空

当输入用户名和密码后，验证码没有输入时，显示验证码为空

JQuery代码展示，注意需要引入jquery包，当然也可以引用在线jquery包

字节跳动公司的jquery（速度快推荐）

<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>

通过简洁的jquery代码来循环判断两个输入框是否为空


<script src="js/jquery-1.9.1.min.js"></script>
<script>
 $('#login_btn').on('click', function(){
        var num=0;
        var str="";
        $("input[type$='text'],input[type$='password']").each(function(n){
            if($(this).val()=="")
            {

                layer.alert(str+=""+$(this).attr("name")+"不能为空！\r\n",{
                    title: '提示框',
                    icon:0,
                });
                num++;
                return false;
            }
        });
        if(num>0){  return false;}
        else{
            layer.alert('登录成功！',{
                title: '提示框',
                icon:1,
            });
            location.href="index.jsp";
            layer.close(index);
        }

    });
</script>

登录界面整体代码

<%--
  Created by IntelliJ IDEA.
  User: 
  Date: 2022/5/19
  Time: 17:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="assets/css/ace.min.css" />
    <link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="assets/css/ace-skins.min.css" />
    <link rel="stylesheet" href="css/style.css"/>
    <script src="assets/js/ace-extra.min.js"></script>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="assets/layer/layer.js" type="text/javascript"></script>
    <title>登录</title>
</head>

<body class="login-layout Reg_log_style" style="background: url(images/login_bg.png);">
<div class="logintop">
    <span>欢迎后台管理界面平台</span>
    <ul>
        <li><a href="#">返回首页</a></li>
        <li><a href="#">帮助</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</div>
<div class="loginbody">
    <div class="login-container">
        <div class="center"></div>
        <div class="space-6"></div>

        <div class="position-relative">
            <div id="login-box" class="login-box widget-box no-border visible" style="margin-top: 50px;">
                <div class="widget-body" >
                    <div class="widget-main" >
                        <h4 class="header blue lighter bigger">
                            <i class="icon-coffee green"></i>
                            管理员登录
                        </h4>

                        <div class="login_icon"><img src="images/login.png" /></div>

                        <form class="">
                            <fieldset>
                                <ul>
                                    <li class="frame_style form_error">
                                        <label class="user_icon"></label>
                                        <input name="用户名" type="text"  id="username"/><i>用户名</i>
                                    </li>
                                    <li class="frame_style form_error">
                                        <label class="password_icon"></label>
                                        <input name="密码" type="password" id="userpwd"/><i>密码</i>
                                    </li>
                                    <li class="frame_style form_error">
                                        <label class="Codes_icon"></label>
                                        <input name="验证码" type="text" id="Codes_text"/><i>验证码</i>
                                        <div class="Codes_region"></div>
                                    </li>
                                </ul>
                                <div class="space"></div>

                                <div class="clearfix">
                                    <label class="inline">
                                        <input type="checkbox" class="ace">
                                        <span class="lbl">保存密码</span>
                                    </label>

                                    <button type="button" class="width-35 pull-right btn btn-sm btn-primary" id="login_btn">
                                        <i class="icon-key"></i>
                                        登录
                                    </button>
                                </div>

                                <div class="space-4"></div>
                            </fieldset>
                        </form>

                        <div class="social-or-login center">
                            <span class="bigger-110">通知</span>
                        </div>

                        <div class="social-login center">
                            请使用IE8及以上版本的浏览器...
                        </div>
                    </div><!-- /widget-main -->

                    <div class="toolbar clearfix"></div>
                </div><!-- /widget-body -->
            </div><!-- /login-box -->
        </div><!-- /position-relative -->
    </div>
</div>
<div class="loginbm">版权所有 2021</div><strong></strong>
</body>
</html>
<script>
    $('#login_btn').on('click', function(){
        var num=0;
        var str="";
        $("input[type$='text'],input[type$='password']").each(function(n){
            if($(this).val()=="")
            {

                layer.alert(str+=""+$(this).attr("name")+"不能为空！\r\n",{
                    title: '提示框',
                    icon:0,
                });
                num++;
                return false;
            }
        });
        if(num>0){  return false;}
        else{
            layer.alert('登录成功！',{
                title: '提示框',
                icon:1,
            });
            location.href="index.jsp";
            layer.close(index);
        }

    });
    $(document).ready(function(){
        $("input[type='text'],input[type='password']").blur(function(){
            var $el = $(this);
            var $parent = $el.parent();
            $parent.attr('class','frame_style').removeClass(' form_error');
            if($el.val()==''){
                $parent.attr('class','frame_style').addClass(' form_error');
            }
        });
        $("input[type='text'],input[type='password']").focus(function(){
            var $el = $(this);
            var $parent = $el.parent();
            $parent.attr('class','frame_style').removeClass(' form_errors');
            if($el.val()==''){
                $parent.attr('class','frame_style').addClass(' form_errors');
            } else{
                $parent.attr('class','frame_style').removeClass(' form_errors');
            }
        });
    })

</script>

做一道光

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
Javaweb登录页面使用JQuery循环判断输入框不能为空

当用户名输入框和密码输入框什么都不输入时，点击登录弹出弹窗显示用户名不能为空当只输入密码不输入用户名时，点击登录弹出弹窗显示用户名不能为空当只输入用户名不输入密码时，显示密码不能为空JQuery代码展示，注意需要引入jquery包，当然也可以引用在线jquery包字节跳动公司的jquery（速度快推荐）<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"><.
复制链接

扫一扫