帝国做视频网站,wordpress选项下拉,门户类网站图片,建网站规则文章目录 实战介绍准备工作创建网页导入样式表和jQuery库编写页面代码编写脚本代码创建成功页面浏览网页和测试结束语 实战介绍
大家好#xff0c;今天我们将一起学习如何使用jQuery来为用户登录页面进行非空校验和登录测试。通过这个实战项目#xff0c;你将学会如何通过jQ… 文章目录 实战介绍准备工作创建网页导入样式表和jQuery库编写页面代码编写脚本代码创建成功页面浏览网页和测试结束语 实战介绍
大家好今天我们将一起学习如何使用jQuery来为用户登录页面进行非空校验和登录测试。通过这个实战项目你将学会如何通过jQuery处理表单提交事件进行输入验证并根据验证结果进行相应的页面跳转。
准备工作
在开始之前请确保你已经安装了一个文本编辑器和一个现代浏览器。你还需要了解基本的HTML和JavaScript知识。
创建网页
在你的工作目录D:\profession_skills_training\下创建一个新的HTML文件命名为jquery_login.html。
导入样式表和jQuery库
在jquery_login.html文件中首先导入必要的样式表和jQuery库。
link relstylesheet hreflogin.css/
script srchttps://code.jquery.com/jquery-3.6.0.min.js/script编写页面代码
接着编写登录页面的HTML结构包括账号和密码输入框以及登录和重置按钮。
bodyh3用户登录/h3form action# methodposttable border1 cellpadding10 aligncentertrtd账号/tdtdinput typetext idusername nameusername placeholder请输入用户名/td/trtrtd密码/tdtdinput typepassword idpassword namepassword placeholder请输入密码/td/trtrtd colspan2 aligncenterinput typesubmit value登录input typereset 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创建成功页面
创建一个简单的成功页面success.html用于显示登录成功后的信息。
浏览网页和测试
保存你的HTML文件并在浏览器中打开它。进行以下测试 非空校验不输入用户名和密码或只输入用户名不输入密码然后单击登录按钮。登录测试输入正确的用户名和密码以及错误的用户名或密码然后单击登录按钮。
结束语
通过这个实战演练你已经学会了如何使用jQuery进行表单的非空校验和登录测试。这是前端开发中的一项重要技能希望你能够在实际项目中灵活运用。如果你有任何问题欢迎随时提问。祝你学习愉快
