页面登录功能

最新推荐文章于 2022-01-03 14:35:47 发布

一拳打俩个

最新推荐文章于 2022-01-03 14:35:47 发布

阅读量825

点赞数

文章标签： c#

本文链接：https://blog.csdn.net/weixin_57726733/article/details/119426924

版权

该博客介绍了一个响应式的登录界面设计，包括用户名、密码和验证码的验证。当输入为空时会有提示，验证码支持点击刷新，并且支持回车键登录。文中还提供了HTML样式、JavaScript代码以及C#控制器和实体类的相关实现。

摘要由CSDN通过智能技术生成

登录界面效果：

用户名、密码、验证码为空时提示不能为空
验证码可以在点击时刷新、点击回车键时即可登录

Html的样式可供参考，且这个样式具有响应式：

  <style>
        .auth-wrapper {   
            min-height: 100vh;
            position: relative;
            background: url('../../Areas/BaseImage/image/auth-bg.jpg') no-repeat center center;
            background-size: cover;
        }
    </style>

<div class="container-fluid p-0">
        <div class="auth-wrapper d-flex justify-content-center align-items-center">
            <div class="card">
                <div class="card-body">
                    <div class="text-center">
                        <span class="db h2">图书管理系统</span>
                        <h5 class="font-medium mb-3 mt-5"></h5>
                    </div>
                    <!-- Form -->
                    <div class="row">
                        <div class="col-12">
                            <form id="fmLogin" method="post">
                                @*用户名*@
                                <div class="form-group form-row">
                                    <label class="sr-only" for="userName">
                                        用户名
                                    </label>
                                    <div class="col-12">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <div class="input-group-addon"><i class="layui-icon layui-icon-user"></i></div>
                                            </div>
                                            <input type="text" name="userName" id="userName" value="@ViewBag.UserNumber" class="form-control" placeholder="用户名" />
                                        </div>
                                    </div>
                                </div>

                                @*密码*@
                                <div class="form-group form-row">
                                    <label class="sr-only" for="userPassword">
                                        密码
                                    </label>
                                    <div class="col-12">
                                        <div class="input-group">