利用JQuery實現註冊頁面的驗證功能
註冊頁面在網頁前端的設計中，是一個比較重要的模組，本程式渣就用自己薄弱的程式設計技術寫了以下程式碼，供大家參考加批評指正。
本段程式碼還用到了正則表示式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery郵箱驗證</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#email").blur(function(e){
var pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
var email=$("#email").val();
if(email==''){
$("#spanEmail").html("郵箱不能為空");
$("#spanEmail").css({"color":"#F00"});
}else if(!pattern.test(email)){
$("#spanEmail").html("郵箱格式不正確");
$("#spanEmail").css({"color":"#F00"});
}else{
$("#spanEmail").hide();
}
});
$("#pwd1").blur(function(e){
var pwd1=$("#pwd1").val();
if(pwd1==''){
$("#spanPwd1").html("密碼不能為空");
$("#spanPwd1").css({"color":"#F00"});
}else if(pwd1.length<6){
$("#spanPwd1").html("密碼不能少於6位");
$("#spanPwd1").css({"color":"#F00"});
}else if(pwd1.length>15){
$("#spanPwd1").html("密碼不能大於15位");
$("#spanPwd1").css({"color":"#F00"});
}else{
$("#spanPwd1").hide();
}
});
$("#pwd2").blur(function(e){
var pwd2=$("#pwd2").val();
if(pwd2==''){
$("#spanPwd2").html("密碼不能為空");
$("#spanPwd2").css({"color":"#F00"});
}else if(pwd2!=$("#pwd1").val()){
$("#spanPwd2").html("兩次密碼不一致");
$("#spanPwd2").css({"color":"#F00"});
}else{
$("#spanPwd2").hide();
}
});
$("#userName").blur(function(e) {
var name=$("#userName").val();
var reg=/^\d+$/;
if(name==''){
$("#spanName").html("姓名不能為空");
$("#spanName").css({"color":"#F00"});
}else if(name.length!=0){
for(var i=0;i<name.length;i++){
if(name[i].match(reg)){
$("#spanName").html("姓名中不能含有數字");
$("#spanName").css({"color":"#F00"});
return;
}else{
$("#spanName").hide();
}
}
}
});
});
</script>
</head>
<body>
<div>註冊休閒網</div>
<div>
<form>
<table>
<tr>
<td>您的Email:</td>
<td>
<input type="text" name="email" id="email" />
<span id="spanEmail"></span>
</td>
</tr>
<tr>
<td>輸入密碼：</td>
<td>
<input type="password" name="pwd1" id="pwd1"/>
<span id="spanPwd1"></span>
</td>
</tr>
<tr>
<td>再輸入一遍密碼：</td>
<td>
<input type="password" name="pwd2" id="pwd2"/>
<span id="spanPwd2"></span>
</td>
</tr>
<tr>
<td>您的姓名：</td>
<td>
<input type="text" name="userName" id="userName"/>
<span id="spanName"></span>
</td>
</tr>
<tr>
<td>性別：</td>
<td id="sex">
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
<span id="spanRadio"></span>
</td>
</tr>
<tr>
<td>出生日期：</td>
<td>
<textarea id="dateShow"></textarea>
<span id="spanDate"></span>
</td>
</tr>
<tr>
<td>
<input type="submit" value="註冊" name="submit" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>