<html>
<head><title>中信會員註冊</title>
<link rel=”stylesheet” type=”text/css” href=”./css/vbulletin.css” />
<link rel=”stylesheet” type=”text/css” href=”./css/form.css” />
<link rel=”stylesheet” type=”text/css” href=”./css/table.css” />
<script language=”javascript” type=”text/javascript”>
//validateText onfocus onblur onchange 驗證用戶名
function validateText( value ){
//獲取img對像 p
var img = document.getElementById( “img” );
var p = document.getElementById( “p” );
if( value.length < 1 ){ //驗證失敗
//alert( 用戶名不能為空 );
img.src = “./img/invalid.gif”;
img.style.display = ;
p.innerHTML = “用戶名不能為空”;
p.style.color = “red”;
//設置焦點
document.csuinfo.username.focus();
return false;
}else{
//alert( 用戶名驗證成功 );
img.src = “./img/valid.gif”;
img.style.display = ;
p.innerHTML = “用戶名驗證成功”;
p.style.color = “blue”;
return true;
}
}
//validatePassword
function validatePassword( value ){
//alert( value );
if( value.length <4 ){
alert(“密碼至少4位”);
//設置焦點
document.csuinfo.password.focus();
return false;
}
var pattern = /^d*$/;//數字0個或多個
if (!pattern.test(value)) {//如是密碼不為數字就輸出
alert(“密碼隻能為數字”);
}
return true;
}
//confirmPassword
function confirmPassword( value ){
//
if( value != document.csuinfo.password.value ){
alert( “兩次密碼不致，請重新輸入！” );
document.csuinfo.password2.focus();
return false;
}
return true;
}
//validateSex
function validateSex(){
var flag = true;
var sex = document.getElementsByName( “sex” );
//alert( sex.length );
for( i = 0; i < sex.length;i++ ){
//通過checked檢查哪個單選是否被選中，
if( sex[i].checked ){
flag = false;
break;
}
}
if( flag ){
alert( “請選擇你的性別!” );
return false;
}
return true;
}
//validateLike
function validateLike(){
var flag = true;
var like = document.getElementsByName( “like” );
//alert( like.length );
for( i = 0; i < like.length;i++ ){
//通過checked檢查哪個單選是否被選中，
if( like[i].checked ){
flag = false;
break;
}
}
if( flag ){
alert( “請選擇你的愛好!” );
return false;
}
return true;
}
//validateSelect
function validateSelect(){
var flag = true; //selected
var s = document.csuinfo.s;
//alert( s.length );
for( i = 0; i < s.length;i++ ){
//通過checked檢查哪個單選是否被選中，
if( s[i].selected ){
flag = false;
break;
}
}
if( flag ){
alert( “請選擇你的分會!” );
return false;
}
return true;
}
//提交當前頁面的數據到目標資源處理 1:通過submit按鈕提交 在form中通過onsubmit事件調用對應的驗證方法 onsubmit=”return onsubmit2()”
function submit2(){
//alert( “ffffff” );
if( validateLike() && validateSelect() ){//驗證成功,調用方法驗證，愛好與幫會的值是否選中
return true;
}
return false;
}
// 2：通過button提交 當前表單的submit元素的name屬性值不能為submit
function submit3(){
//alert( “ffffff” );
if( validateLike() && validateSelect()&&validateSex() ){//驗證成功
//獲取當前的form對像
var form1 = document.csuinfo;
//修改form中的屬性值
form1.action = “dynamicDoc.html”;
form1.submit();//提交方法
return true;
}
return false;
}
//JS正則表達式 /^：開始 $/：結束 d：數字 D:非數字 w:數字，字母，下劃線 W:與w相反
//[]:包含 {}：出現的次數 {2} 兩次 {1,2}:至少一次，最多兩次 .:任意字符
function validateAge( value ){
//alert( value );
var pattern = /^d$/;
//1:規則匹配內容
var flag = pattern.test( value );//驗證成功返回true,驗證失敗返回false
flag = pattern.exec( value );//驗證成功返回對應的值，驗證失敗返回null
//2:通過內容匹配規則
flag = value.match( pattern );//驗證成功返回對應的值，驗證失敗返回null
flag = value.search( pattern );//驗證成功返回0，驗證失敗返回-1
alert( flag );
}
</script>
</head>
<body>
<form name=”csuinfo” action=”obj.html” method=”get” onSubmit=”return submit2();”>
<table align=”center” border=”2″>
<caption>中信會員註冊</caption>
<tr>
<td>用戶名</td>
<td><input type=”text” name=”username” maxlength=”5″ size=”9″ onblur=”validateText(this.value)”/>
<img id=”img” src=”./img/valid.gif” style=”display: none” /><!–image標簽主要是為瞭顯示成功與否的圖片,p標簽用於顯示成功與否的提示文字–>
<span id=”p”></span>
</td>
</tr>
<tr>
<td>age</td>
<td><input type=”text” name=”age” maxlength=”5″ size=”9″ onblur=”validateAge(this.value)”/>
</td>
</tr>
<tr>
<td>密碼</td>
<td><input type=”password” name=”password” onBlur=”validatePassword( this.value )” /></td>
</tr>
<tr>
<td>確認密碼</td>
<td><input type=”password” name=”password2″ onBlur=”confirmPassword( this.value )” /></td>
</tr>
<tr>
<td>性別</td>
<td>男：<input type=”radio” name=”sex” value=”1″ “/><!–name選一樣，方便以後獲取–>
女：<input type=”radio” name=”sex” value=”0″ “/>
</td>
</tr>
<tr>
<td>愛好</td>
<td>音樂：<input type=”checkbox” name=”like” value=”1″ /><!–name選一樣，方便以後獲取–>
體育：<input type=”checkbox” name=”like” value=”2″ />
遊戲：<input type=”checkbox” name=”like” value=”3″ />
</td>
</tr>
<tr>
<td>上傳頭像</td>
<td><input type=”file” name=”file” value=111 />
</td>
</tr>
<tr>
<td>圖片按鈕</td> <!– image 和img屬性一樣 作用和submit按鈕一樣–>
<td><input type=”image” name=”image” alt=”提交” src=”./gif/face.gif” />
</td>
</tr>
<tr>
<td>hidden</td>
<td><input type=”hidden” name=”flag” value=”2″ />
</td>
</tr>
<tr>
<td>button</td>
<td><input type=”button” name=”b” value=”button” onClick=”submit3();” />
</td>
</tr>
<tr>
<td>你想參加幫會</td>
<td> <select name=”s” size=”3″ multiple>
<option value=”1″>斧頭幫</option>
<option value=”2″>丐幫</option>
<option value=”3″>紅花會</option>
<option value=”4″>天地會</option>
</select>
</td>
</tr>
<tr>
<td>自我簡介</td>
<td><textarea name=”info” rows=”10″ cols=”25″>
12345
</textarea>
</td>
</tr>
<tr>
<td>單獨button</td>
<td><button type=”reset”>button2<img src=”./gif/face.gif”/></button>
</td>
</tr>
<tr>
<td>操作</td>
<td><input type=”submit” value=”註冊” />
<input type=”reset” value=”重置” /></td>
</tr>
</table>
</form>
</body>
</html>