今天学习的知识点:
(1)submit和button,以及其display和disabled属性。
(2)JavaScript中的变量,尤其是hidden变量的使用。
(3)函数定义。
为了练习以上内容,自己写了一个登录,一个注册。
注册:有用户名、密码、确认密码、邮箱和手机号,前四个项目均不为空,且密码和确认密码要一致,会判断手机号的长度,必须为11位。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Comet注册</title>
</head>
<body>
<form method="post" action="" οnsubmit="eg.submit();">
用户名:<input type="text" name="" id="userName" /><br /><br />
密码:<input type="password" name="" id="password1" /><br /><br />
确认:<input type="password" name="" id="password2" /><br /><br />
邮箱:<input type="text" name="" id="email"/><br /><br />
手机号:<input type="text" name="" id="phoneNum"/><br /><br />
<input type="submit" name="" id="regBtm" value="注册">
</form>
<script>
//定义一个对象
var eg={};
//获取各个组件
eg.$=function(id){
return document.getElementById(id);
}
//写提交函数
eg.submit=function(){
var userName=eg.$("userName");
var passwd1=eg.$("password1");
var passwd2=eg.$("password2");
var email=eg.$("email");
var phone=eg.$("phoneNum");
if(userName.value==''){
alert('用户名不能为空');
return false;
}
if(passwd1.value=='' || passwd2.value==''){
alert('密码不能为空');
return false;
}
if(passwd1.value!=passwd2.value){
alert('两次密码不同');
return false;
}
if(email.value==''){
alert('请输入邮箱');
return false;
}
if(phone.value.length!=11){
alert('请输入完整的手机号');
return false;
}
return true;
}
</script>
</body>
</html>
登录:只有用户名和密码,用户名和密码均不为空则登录成功。一旦密码或者用户名为空超过2次,会显示忘记密码按钮,同时登录按钮失效。在按下忘记密码按钮下,登录按钮可以正常使用。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>登录</title>
</head>
<body>
<form method="post" action="">
用户名:<input type="text" id="userName"/><br /><br />
密 码:<input type="password" id="passwd"/><br /><br />
<input type="button" value="登录" id="btnlog" οnclick="eg.login();"/>
<input type="button" value="忘记密码" id="btnforget" style="display:none" οnclick="eg.forget();"/>
<input type="hidden" value=0 id="errnum"/>
</form>
<script type="text/javascript">
<!--
//登录功能
//用户名和密码不匹配三次及以上,则可以按忘记密码按钮,否则不可以按
//登录会出现登陆成功
//-->
//首先定义一个对象
var eg={};
//获取各个组件,此处的id为一个字符串
eg.$=function(id){
return document.getElementById(id);
};
eg.login=function(){
var userName=eg.$("userName");
var password=eg.$("passwd");
//暂时只能判断用户名和密码是否为空
if(userName.value==''){
alert('用户名不能为空!');
//出现错误情况,增加一次错误次数
eg.errCount();
}else {
if(password.value==''){
alert('密码不能为空!');
eg.errCount();
}else{
alert('登录成功');
}
}
};
//增加错误记录次数
eg.errCount=function(){
var err=eg.$("errnum");
var old=err.value;
err.value=parseInt(old)+1;
//如果错误次数为三以及上,则忘记密码的按钮可以使用,登录按钮不能使用
if(parseInt(err.value)>2){
var login=eg.$("btnlog");
login.disabled=true;
var forget=eg.$("btnforget");
forget.style.display="block";
}
};
//登录密码可以使用,而且将记录错误数的变量清0
eg.forget=function(){
var login=eg.$("btnlog");
login.disabled=false;
var err=eg.$("errnum");
err.value=0;
};
</script>
</body>
</html>
发现的问题,可能都是些微不足道的问题,但确实是困扰了我一阵,还有些小说明。
(1)
//获取各个组件,此处的id为一个字符串
eg.$=function(id){
return document.getElementById(id);
};
所以在使用时,应为:
var userName=eg.$("userName");
而不是:
var userName=eg.$(userName);
这样会报“userName没有定义”的错误。
(2) if(userName.value==''){
alert('用户名不能为空!');
//出现错误情况,增加一次错误次数
eg.errCount();
}
取某变量的值,应为以上形式,而非:
if(userName==''){
alert('用户名不能为空!');
//出现错误情况,增加一次错误次数
eg.errCount();
}
这样不会报错,但是不会执行该部分代码。
(3)全局变量有多种定义形式:
var + 变量名:但需要放在各种函数之外,才为全局变量。
变量名:放在函数内外均可,在赋值后变为全局变量。
window.变量名。
这篇文章写得很清楚。