(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)
}
}
(4)写页面的过程中碰到的问题,怎么解决的?
问题:提示信息太长自动换行
解决:把表格宽度调宽
问题:不管输入信息是否正确都直接弹出结果
解决:用return阻止