表單驗證

          <form name="formTest" action="#">
          ??<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" "

          <html xmlns="?<head>
          ??<!-- 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>

          ?<body>
          ??<form id="formTest">
          ???用戶名
          ???<input type="text" id="t1"? onfocus="tixing();"/><br /><div id="div1"? ></div>
          ???密&nbsp碼?
          ???<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" "

          <html xmlns="<head>
          ?<!-- 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>

          <body>
          ?
          ??<div>
          ???用戶名:<input type="text" id="te1" onblur="a()"/><br/>
          ???密&nbsp&nbsp碼:<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>

          還是不完善..哎..

          posted on 2006-12-07 22:14 閱讀(206) 評論(0)  編輯  收藏


          只有注冊用戶登錄后才能發(fā)表評論。


          網(wǎng)站導(dǎo)航:
           
          <2006年12月>
          262728293012
          3456789
          10111213141516
          17181920212223
          24252627282930
          31123456

          導(dǎo)航

          統(tǒng)計

          常用鏈接

          留言簿(1)

          隨筆檔案

          搜索

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 阿拉善左旗| 哈巴河县| 泰和县| 东至县| 山西省| 南丰县| 泸定县| 潮州市| 济源市| 嘉荫县| 买车| 信宜市| 安福县| 黔东| 井研县| 南靖县| 日土县| 平度市| 汉中市| 广昌县| 苍溪县| 泊头市| 邵武市| 通海县| 洮南市| 鹤壁市| 墨脱县| 特克斯县| 抚远县| 集贤县| 崇仁县| 平江县| 怀化市| 招远市| 桦南县| 朔州市| 广河县| 盐边县| 浦城县| 安国市| 开江县|