表單驗證
<form name="formTest" action="#"> <html xmlns="?<head> ?<body> <html xmlns="<head> <body>
??<input type="checkbox" id="w1" name="box" value="0" />男
??<input type="checkbox" id="w2" name="box" value="0" />女
??<input type="checkbox" id="w3" name="box" value="0" />外鄉(xiāng)人</br>
??<input type="button" value="ok" onclick="w1.checked='checked';w2.checked='checked';w3.checked='checked'"/>
簡單的按一個鍵,所有的check都被選中.
下面的這個是關(guān)于表單驗證的一個作業(yè).需要分析:就是在一個TEXT聚焦的時候,就會在旁邊顯示一排字告訴你里面內(nèi)容必須不為空,并且要大于或者等于8位.當(dāng)你輸入的內(nèi)容符合要求的時候,該行字就自動小時.我算是基本實現(xiàn)了功能了,但是不完善.因為當(dāng)我輸入9個字的時候,字并不是自動小時的,而是需要我再一次的聚焦..如果那位達(dá)人能幫忙解決下,俺感激不盡..
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
??<!-- Created by TopStyle Pro Trial Version - www.bradsoft.com -->
??<title></title>
??<style>
???div
???{
????color: red;
????font-size: 13px;
???}
???
???
??
??</style>
??<script>
???function tixing()
???{
????
????var divObject = document.getElementById("div1");
????var text= document.getElementById("t1");
????if(text.value.length >=8)
????{
????divObject.innerHTML = "您輸入的用戶名必須在0-8位之間。";
????divObject.style.display = "none";
????}?
????else
????{
????divObject.innerHTML = "您輸入的用戶名必須在0-8位之間。";
????divObject.style.display = "";
????}
????
???}?
???function tixing1()
???{
????var divObject1 = document.getElementById("div2");
????var text2= document.getElementById("t2");
????if(text2.value.length >=8)
????{
????divObject1.innerHTML = "您輸入的用戶名必須在0-8位之間。";
????divObject1.style.display = "none";
????}?
????else
????{
????divObject1.innerHTML = "您輸入的用戶名必須在0-8位之間。";
????divObject1.style.display = "";
????}
???}
???function validate()
???{
????var te1 = document.getElementById("t1")
????var te2 = document.getElementById("t2")
????var divObject = div1;
????var divObject1 = div2;
????
????if(te1.value.length < 8)
????{
?????divObject.innerHTML = "您輸入的用戶名必須在0-8位之間。";
?????divObject.style.display = "";
????}????
????
????if(te2.value.length < 8)
????{
?????divObject1.innerHTML = "您輸入的密碼必須在0-8位之間"
?????divObject1.style.display = "";
????}
????
????if(te1.value.length < 8 && te2.value.length < 8)
????{
????divObject.innerHTML = "您輸入的用戶名必須在0-8位之間。";
????divObject1.innerHTML = "您輸入的密碼必須在0-8位之間"
????divObject.style.display = "";
????divObject1.style.display = "";
????}
???}
???
??</script>
?</head>
??<form id="formTest">
???用戶名
???<input type="text" id="t1"? onfocus="tixing();"/><br /><div id="div1"? ></div>
???密 碼?
???<input type="password" id="t2"? onfocus="tixing1()" /><br /><div id="div2"></div>
???<input type="button" id="bt1" value="登錄" onclick="validate()"/>
??</form>
?</body>
</html>
再下面的這個是今天的作業(yè).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
?<!-- Created by TopStyle Pro Trial Version - www.bradsoft.com -->
?<title></title>
?<style>
?div
?{
??float: left;
?}
?</style>
?<script>
??function a()
??{
???var textId0 = document.getElementById("te1");
???var text0 = textId0.value;
???var areId = document.getElementById("text");
???areId.value = areId.value+"1."+"用戶名:"+text0+"\n";
???
??}
??function b()
??{
???var textId1 = document.getElementById("pa");
???var text1 = textId1.value;
???var areId = document.getElementById("text");
???areId.value =areId.value+"3."+"密碼:"+text1+"\n";
??}
??function c()
??{
???var radioId1 = document.getElementById("ra1");
???var radio1 = radioId1.value;
???var areId = document.getElementById("text");
???areId.value =areId.value+"4."+"單選:"+radio1+"\n";
??}
??function d()
??{
???var radioId2 = document.getElementById("ra2");
???var radio2 = radioId2.value;
???var areId = document.getElementById("text");
???areId.value =areId.value+"4."+"單選:"+radio2+"\n";
??}
??function ei()
??{
???var radioId3= document.getElementById("ra3");
???var radio3 = radioId3.value;
???var areId = document.getElementById("text");
???areId.value =areId.value+"4."+"單選:"+radio3+"\n";
??}
??function f()
??{
???var checkId1= document.getElementById("che1");
???var check1 = checkId1.value;
???var areId = document.getElementById("text");
???areId.value =areId.value+"5."+"多選:"+check1+"\n";
??}
??function g()
??{
???var checkId2= document.getElementById("che2");
???var check2 = checkId2.value;
???var areId = document.getElementById("text");
???areId.value =areId.value+"5."+"多選:"+check2+"\n";
??}
??function h()
??{
???var checkId3= document.getElementById("che3");
???var check3 = checkId3.value;
???var areId = document.getElementById("text");
???areId.value =areId.value+"5."+"多選:"+check3+"\n";
??}
??function select()
??{
???var a = document.getElementById("selectId");
???var b = a.options[a.selectedIndex];
???var c = b.value;
???var? areId = document.getElementById("text");
??
???areId.value = areId.value+c;
??}
?</script>
</head>
?
??<div>
???用戶名:<input type="text" id="te1" onblur="a()"/><br/>
???密  碼:<input type="password" id="pa" onblur="b();"/><br />
???<a>
???<input type="radio" value="吃飯" id="ra1" name="1" onblur="c();"/>吃飯
???<input type="radio" value="睡覺" id="ra2" name="1" onblur="d();"/>睡覺
???<input type="radio" value="上學(xué)" id="ra3" name="1" onblur="ei();"/>上學(xué)
???</a><br />
???<a>
???<input type="checkbox" id="che1" value="巷巷" onblur="f()"/>巷巷
???<input type="checkbox" id="che2" value="街道" onblur="g()"/>街道
???<input type="checkbox" id="che3" value="邊邊" onblur="h()"/>邊邊
???</a><br />
???<textarea id="text" cols="20" rows="6"></textarea>
??</div>
??<form id="selectId0">
???<select id="selectId" onblur="select()"; / >
????<option value="東東">東東? </option>
????<option value="南南">南南</option>
????<option value="西西">西西 </option>
????<option value="北北">北北 </option>
???</select>
??</form>
?
</body>
</html>
還是不完善..哎..