当前位置：首页 > news >正文

网络网站建设公司网络营销郑州优化推广公司

news 2025/7/25 10:24:17

网络网站建设公司,网络营销郑州优化推广公司,工业云网站建设,有网站想修改里面的内容怎么做文章目录实战介绍准备工作创建网页导入样式表和jQuery库编写页面代码编写脚本代码创建成功页面浏览网页和测试结束语实战介绍大家好，今天我们将一起学习如何使用jQuery来为用户登录页面进行非空校验和登录测试。通过这个实战项目，你将学会如何通过jQ…

文章目录

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

实战介绍

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

准备工作

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

创建网页

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

导入样式表和jQuery库

在jquery_login.html文件中，首先导入必要的样式表和jQuery库。

<link rel="stylesheet" href="login.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

编写页面代码

接着，编写登录页面的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>

编写脚本代码

在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>