| |
<html> |
| |
<head> |
| |
<title>表单页面</title> |
| |
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> |
| |
|
| |
<script> |
| |
function checkData(){ |
| |
var canSub = true; |
| |
|
| |
//非空校验 |
| |
canSub = checkNull("username","用户名不能为空！") && canSub; |
| |
canSub = checkNull("password","密码不能为空！")&& canSub; |
| |
canSub = checkNull("password2","确认密码不能为空！")&& canSub; |
| |
canSub = checkNull("nickname","昵称不能为空！")&& canSub; |
| |
canSub = checkNull("email","邮箱不能为空！")&& canSub; |
| |
canSub = checkNull("valistr","验证码不能为空！")&& canSub; |
| |
canSub = checkNull("img","头像不能为空！")&& canSub; |
| |
//描述信息非空校验 |
| |
document.getElementById("desc_msg").innerText = ""; |
| |
var desc = document.getElementsByName("desc")[0]; |
| |
if(desc.value == "请输入描述信息~！"){ |
| |
document.getElementById("desc_msg").innerText = "描述信息不能为空！"; |
| |
canSub = false; |
| |
} |
| |
|
| |
//爱好非空校验 |
| |
document.getElementById("like_msg").innerText = ""; |
| |
var likes = document.getElementsByName("like"); |
| |
var hasLike = false; |
| |
for(var i = 0;i<likes.length;i++){ |
| |
if(likes[i].checked == true){ |
| |
hasLike = true; |
| |
break; |
| |
} |
| |
} |
| |
if(!hasLike){ |
| |
document.getElementById("like_msg").innerText = "爱好不能为空！"; |
| |
canSub = false; |
| |
} |
| |
|
| |
//性别非空校验 |
| |
document.getElementById("gender_msg").innerText = ""; |
| |
var genders = document.getElementsByName("gender"); |
| |
var hasGender = false; |
| |
for(var i = 0;i<genders.length;i++){ |
| |
if(genders[i].checked == true){ |
| |
hasGender = true; |
| |
break; |
| |
} |
| |
} |
| |
if(!hasGender){ |
| |
document.getElementById("gender_msg").innerText = "性别不能为空！"; |
| |
canSub = false; |
| |
} |
| |
|
| |
//两次密码一致的校验 |
| |
var psw1 = document.getElementsByName("password")[0].value; |
| |
var psw2 = document.getElementsByName("password2")[0].value; |
| |
if(psw1 != "" && psw2 !="" && psw1 != psw2){ |
| |
document.getElementById("password2_msg").innerText = "两次密码不一致！"; |
| |
canSub = false; |
| |
} |
| |
|
| |
//邮箱格式的校验 |
| |
var email = document.getElementsByName("email")[0].value; |
| |
if(email.value != "" && !/^\w+@\w+(\.\w+)+$/.test(email)){ |
| |
document.getElementById("email_msg").innerText = "邮箱格式不正确！"; |
| |
canSub = false; |
| |
} |
| |
|
| |
return canSub; |
| |
} |
| |
|
| |
/*检验非空公共方法*/ |
| |
function checkNull(name,msg){ |
| |
document.getElementById(name+"_msg").innerText = ""; |
| |
var tag = document.getElementsByName(name)[0]; |
| |
if(tag.value == ""){ |
| |
document.getElementById(name+"_msg").innerText = msg; |
| |
return false; |
| |
} |
| |
return true; |
| |
} |
| |
|
| |
//描述信息处理 |
| |
function descFocus(obj){ |
| |
if(obj.value == "请输入描述信息~！"){ |
| |
obj.value = ""; |
| |
} |
| |
} |
| |
function descBlur(obj){ |
| |
if(obj.value == ""){ |
| |
obj.value = "请输入描述信息~！"; |
| |
} |
| |
} |
| |
</script> |
| |
<style type="text/css"> |
| |
span{ |
| |
color:red; |
| |
font-size:12px; |
| |
} |
| |
</style> |
| |
</head> |
| |
<body> |
| |
<form action="http://localhost:8080" method="POST" onsubmit="return checkData()"> |
| |
<table border="1px" align="center" cellpadding="10px" cellspacing="0px" borderColor="red" bgcolor="pink"> |
| |
<caption><font color="red" size="6">注册表单</font></caption> |
| |
<input type="hidden" name="id" value="9527"/> |
| |
<tr> |
| |
<td>用户名:</td> |
| |
<td><input type="text" name="username" /> <span id="username_msg"></span></td> |
| |
</tr> |
| |
<tr> |
| |
<td>密码:</td> |
| |
<td><input type="password" name="password"/> <span id="password_msg"></span></td> |
| |
</tr> |
| |
<tr> |
| |
<td>确认密码:</td> |
| |
<td><input type="password" name="password2"/> <span id="password2_msg"></span></td> |
| |
</tr> |
| |
<tr> |
| |
<td>性别：</td> |
| |
<td> |
| |
<input type="radio" name="gender" value="男"/>男 |
| |
<input type="radio" name="gender" value="女"/>女 <span id="gender_msg"></span> |
| |
</td> |
| |
</tr> |
| |
<tr> |
| |
<td>昵称：</td> |
| |
<td><input type="text" name="nickname"/> <span id="nickname_msg"></span></td> |
| |
</tr> |
| |
<tr> |
| |
<td>邮箱：</td> |
| |
<td><input type="text" name="email"/> <span id="email_msg"></span></td> |
| |
</tr> |
| |
<tr> |
| |
<td>爱好：</td> |
| |
<td> |
| |
<input type="checkbox" name="like" value="lq"/>篮球 |
| |
<input type="checkbox" name="like" value="zq"/>足球 |
| |
<input type="checkbox" name="like" value="qq"/>铅球 |
| |
<input type="checkbox" name="like" value="blq"/>玻璃球 |
| |
<span id="like_msg"></span> |
| |
</td> |
| |
</tr> |
| |
<tr> |
| |
<td>客户类型：</td> |
| |
<td> |
| |
<select name="type"> |
| |
<option value="pm">平民</option> |
| |
<option value="sxdy">少先队员</option> |
| |
<option value="gqty">共青团员</option> |
| |
<option value="ybdy">预备党员</option> |
| |
<option value="zsdy">正式党员</option> |
| |
</select> |
| |
<span id="type_msg"></span> |
| |
</td> |
| |
</tr> |
| |
<tr> |
| |
<td>头像：</td> |
| |
<td> |
| |
<input type="file" name="img"/> <span id="img_msg"></span> |
| |
</td> |
| |
</tr> |
| |
<tr> |
| |
<td>描述信息：</td> |
| |
<td> |
| |
<textarea id="desc" rows="5" cols="45" name="desc" onfocus="descFocus(this)" onblur="descBlur(this)">请输入描述信息~！</textarea> <br/><span id="desc_msg"></span> |
| |
</td> |
| |
</tr> |
| |
<tr> |
| |
<td>验证码：</td> |
| |
<td> |
| |
<input type="text" name="valistr"/> |
| |
<img src="1.jpg" width="100px" height="20px"/> |
| |
<span id="valistr_msg"></span> |
| |
</td> |
| |
</tr> |
| |
<tr> |
| |
<td colspan="2" align="right"> |
| |
<input type="submit" value="提 交"/> |
| |
<input type="reset" value="重 置"/> |
| |
</td> |
| |
</tr> |
| |
</table> |
| |
</form> |
| |
</body> |
| |
</html> |
浙公网安备 33010602011771号