首页 前端知识 jQuery 用户登录页面非空校验与登录测试

jQuery 用户登录页面非空校验与登录测试

2024-10-13 19:10:03 前端知识 前端哥 580 42 我要收藏

文章目录

  • 实战介绍
  • 准备工作
  • 创建网页
  • 导入样式表和jQuery库
  • 编写页面代码
  • 编写脚本代码
  • 创建成功页面
  • 浏览网页和测试
  • 结束语

在这里插入图片描述

实战介绍

大家好,今天我们将一起学习如何使用jQuery来为用户登录页面进行非空校验和登录测试。通过这个实战项目,你将学会如何通过jQuery处理表单提交事件,进行输入验证,并根据验证结果进行相应的页面跳转。

准备工作

在开始之前,请确保你已经安装了一个文本编辑器和一个现代浏览器。你还需要了解基本的HTML和JavaScript知识。

创建网页

  1. 在你的工作目录D:\profession_skills_training\下创建一个新的HTML文件,命名为jquery_login.html

导入样式表和jQuery库

  1. jquery_login.html文件中,首先导入必要的样式表和jQuery库。
<link rel="stylesheet" href="login.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

编写页面代码

  1. 接着,编写登录页面的HTML结构,包括账号和密码输入框以及登录和重置按钮。
<body>
    <h3>用户登录</h3>
    <form action="#" method="post">
        <table border="1" cellpadding="10" align="center">
            <tr>
                <td>账号</td>
                <td><input type="text" id="username" name="username" placeholder="请输入用户名"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" id="password" name="password" placeholder="请输入密码"></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="登录">
                    <input type="reset" value="重置">
                </td>
            </tr>
        </table>
    </form>
</body>

编写脚本代码

  1. jquery_login.html文件中,编写jQuery脚本代码,用于处理表单提交事件,进行非空校验,并根据用户名和密码的正确性进行页面跳转。
<script>
    $(document).ready(function() {
        $('form').submit(function(e) {      
            e.preventDefault();
            let username = $('#username').val();
            let password = $('#password').val();
            if (username == "") {
                alert("用户名不能为空~");
                $('#username').focus();
            } else if (password == "") {
                alert("密码不能为空~");
                $('#password').focus();
            } else if (username == 'admin' && password == '123456') {
                // 登录成功后跳转到成功页面
                window.location.href = 'success.html';
            } else {
                alert('用户名或密码错误~');
            }
        });
    });			
</script>

创建成功页面

  1. 创建一个简单的成功页面success.html,用于显示登录成功后的信息。

浏览网页和测试

  1. 保存你的HTML文件,并在浏览器中打开它。进行以下测试:
    • 非空校验:不输入用户名和密码,或只输入用户名不输入密码,然后单击登录按钮。
    • 登录测试:输入正确的用户名和密码,以及错误的用户名或密码,然后单击登录按钮。

结束语

通过这个实战演练,你已经学会了如何使用jQuery进行表单的非空校验和登录测试。这是前端开发中的一项重要技能,希望你能够在实际项目中灵活运用。如果你有任何问题,欢迎随时提问。祝你学习愉快!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18880.html
标签
评论
发布的文章

JSON:API Normalizer 项目教程

2024-10-30 21:10:43

json2html 项目教程

2024-10-30 21:10:41

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!