悦轩饼家登录动态页面

最新推荐文章于 2024-06-21 15:14:18 发布

m0_71810729

最新推荐文章于 2024-06-21 15:14:18 发布

阅读量193

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/m0_71810729/article/details/125416004

版权

（1）主题（目标）：完成项目内容

用js完成悦轩饼家登录动态页面

（2）完成页面所需要的知识点（重难点）

获取文本框内录入的内容：document.getElementById("").value;

提示显示:document.getElementById("").innerHTML=" ";

阻止代码向下运行：return

获取字符位数：文本框id+.length

（3）完成页面的步骤

首先给用户名和密码后的文本框分别起一个id名字，然后分别在两个文本框的后面创建一个lable标签用来显示提示信息内容并给两个lable标签分别起两个不同的id名，在body外写script标签，再写入function函数，再声明变量分别获取用户名和密码框内录入的内容，再进行判断文本框内是否为空，如果为空就提示用户名不能为空，在判断密码的位数是否符合要求，如果不符合就提示密码尾数不符，分别用return阻止代码运行，如果都符合就弹窗提示用户名和密码。

function btn(){
			var useyhm=document.getElementById("yhm").value;
			var usepwd=document.getElementById("pwd").value;
				if(useyhm==""){
					document.getElementById("l1").innerHTML="用户名不能为空";
					// alert("用户名不能为空")
					return;
				}else if(usepwd.length<6||usepwd.length>16){
					document.getElementById("l2").innerHTML="输入位数不对要求6~16位数 ";
					return;
				}else{
					alert("用户名为："+useyhm+"密码为："+usepwd)
				}			
		}