JavaScript学习笔记（校验注册）
第一种（效验后在右边以红色文字提示，再加上alert提醒，用正则表达式匹配邮箱，使用document.getElementByID获取元素的value）
.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function checkusername(username){
console.log(username);
console.log(username.value);
if(username.value.length<3||username.value.length>10){
alert("用户名必须是3-10位");
wrongname.innerText="用户名输入错误";
err()
ispass=false;
}else wrongname.innerText="";
}
function checkemail(email){
var p=/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
if(p.test(email.value)==false){
alert("请输入正确的邮箱!");
wrongemail.innerText="邮箱输入错误";
err()
ispass=false;
}else wrongemail.innerText="";
}
function err(){
var err=document.getElementById("error");
var errvalue=err.value
err.value=err.value+1
lock();
}
function lock(){
var errorvalue=document.getElementById("error")
if(errorvalue.value>5){
var regbu=document.getElementById("resbu")
regbu.disabled=true
}
}
function checkpass(pass){
var repass=document.getElementById("repassword").value;
var passmsg=document.getElementById("wrongpass").value;
var repassmsg=document.getElementById("wrongrepass").value;
if(pass.value.length<3||pass.value.length>10){
alert("密码必须是3-10位");
wrongpass.innerText="密码输入错误";
wrongrepass.innerText="确认密码输入错误";
err()
ispass=false;
}else if(repass!=pass.value){
alert("请输入密码和确认密码相等");
wrongrepass.innerText="确认密码输入错误";
err()
ispass=false;
}else{
wrongpass.innerText="";
wrongrepass.innerText="";
}
}
</script>
</head>
<body>
<form action="sdf.jsp" onsubmit="false">
<table border="1",width="500px",height="700px">
<input type="hidden" name="" id="error" value="0" />
<tr>
<td>用户名</td><td><input type="text" placeholder="请输入你的用户名" id="username" onblur="checkusername(this)"/>
<font color="red" id="wrongname"></font></td>
</tr>
<tr>
<td>邮箱</td><td><input type="text" id="email" placeholder="请输入你的邮箱" onblur="checkemail(this)"/>
<font color="red" id="wrongemail"></font></td>
</tr>
<tr>
<td>密码</td><td><input type="password" placeholder="请输入你的密码" id="password" onblur="checkpass(this)"/>
<font color="red" id="wrongpass"></font></td>
</tr>
<tr>
<td>确认密码</td><td><input type="password" placeholder="请输入你的确认密码" id="repassword" />
<font color="red" id="wrongrepass"></font></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="reset" value="重置"><input type="submit" value="注册" id="resbu"></td>
</tr>
</form>
</body>
</html>
第二种（效验后仅通过alert提醒，通过document.getElementById获取元素value值使用eg作为命名空间，把函数都存储在里面（减少“环境污染”））
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style></style>
</head>
<body>
<form method="POST" onsubmit="return eg.check();">
<input type="hidden" name="" id="error" value="0" />
<br>账户：<input type="text" name="" id="userid" value="" /></br>
<br>密码：<input type="password" name="" id="pwid" value="" /></br>
<br>确认：<input type="paaword" name="" id="pwid2" value="" /></br>
<br>性别：<input type="radio" name="sex" id="sex" value="1" />男<input type="radio" name="" value="0" />女</br>
<br>年龄：<select name="" id="age">
<option value="0" selected="selected">请选择年龄段</option>
<option value="1">18岁以下</option>
<option value="2">18-22</option>
<option value="3">22-40</option>
<option value="4">40-60</option>
<option value="5">60以上</option>
<select>
</br>
<br>爱好：<input type="checkbox" name="like" value="1" />
唱歌<input type="checkbox" name="like" value="2" />
打篮球<input type="checkbox" name="like" value="3" />
舞蹈<input type="checkbox" name="like" value="4" />
编程<input type="checkbox" name="like" value="5" />
</br>
<br>简介：<textarea name="" rows="10" cols="25" id="discription"></textarea></br>
<br><input type="submit" name="" id="regbut" value="注册" /></br>
</form>
</body>
</html>
<script type="text/javascript">
var eg={}
eg.$=function(id){
return document.getElementById(id)
}
eg.check=function(){
var uid=eg.$("userid")
var upwd=eg.$("pwid")
var upwd2=eg.$("pwid2")
var sex=eg.$("sex")
var dis=eg.$("discription")
var age=eg.$("age")
var likes=document.getElementsByClassName("like")
var likenum=0
for(var n=0;n<likes.length;n++){
if(likes[n].checked){
likenum++
}
}
if (uid.value==""){
alert("用户名不能为空")
eg.error()
}
if (upwd.value==""){
alert("密码不能为空")
eg.error()
}
if(upwd2.value!=upwd.value){
alert("两次密码输出入不相同")
eg.error()
}
if(sex.value!=1||sex.value!=0){
alert("请选择你的性别")
eg.error()
}
if(dis.value.length>100){
alert("简介太长了")
eg.error()
}
if(age.value>5||age.value<1){
alert("请选择你的年龄段")
eg.error()
}
if(likenum==0){
alert("请至少选择一个爱好")
eg.error()
return false
}
return true
}
eg.error=function(){
var err=document.getElementById("error");
var errvalue=err.value
err.value=err.value+1
eg.lock();
}
eg.lock=function(){
var errorvalue=eg.$("error")
if(errorvalue.value>5){
var regbu=eg.$("regbut")
regbu.disabled=true
}
}
</script>
4437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
