一、為什么需要表單驗(yàn)證：
1、避免信息無(wú)法更新或出現(xiàn)新錯(cuò)誤
2、減輕服務(wù)器端的壓力
二、電子郵件格式的驗(yàn)證：
Code
<HTML>
<HEAD>
<TITLE>使用文本框控件</TITLE>
<SCRIPT language = "JavaScript">
function checkEmail( )
{
var strEmail=document.myform.txtEmail.value;
if (strEmail.length==0)
{
alert("電子郵件不能為空!");
return false;
}
if (strEmail.indexOf("@",0)==-1)
{
alert("電子郵件格式不正確\n必須包含@符號(hào)！");
document.myform.txtEmail.focus( );
document.myform.txtEmail.select( );
return false;
}
if (strEmail.indexOf(".",0)==-1)
{
alert("電子郵件格式不正確\n必須包含.符號(hào)！");
document.myform.txtEmail.focus( );
document.myform.txtEmail.select( );
return false;
}
return true;
}
function clearText( )
{
if (document.myform.txtEmail.value=="請(qǐng)輸入真實(shí)的電子郵箱，我們將發(fā)送激活密碼")
{
document.myform.txtEmail.value="" ;
document.myform.txtEmail.style.color="red";
}
}
</SCRIPT>
<STYLE type="text/css">
<!--
.textBorder {
border: 1px solid;
font-size:15px;
}
-->
</STYLE>
</HEAD>
<FORM name="myform" method="post" action="reg_success.htm" onSubmit="return checkEmail( )">
<P><IMG src="images/reg_back1.jpg" width="979" height="195"></P>
<TABLE width="559" border="0" align="center">
<TR>
<TD>登錄名：</TD>
<TD colspan="2"><INPUT name="txtUserName" type="text" class="textBorder" id="txtUserName" size="40"></TD>
</TR>
<TR>
<TD>您的電子郵件: </TD>
<TD colspan="2"><INPUT name="txtEmail" type="text" class="textBorder" id="txtEmail" value="請(qǐng)輸入真實(shí)的電子郵箱，我們將發(fā)送激活密碼" size="40" onFocus="clearText( )" style="color: #666666;">
*必填</TD>
</TR>
<TR>
<TD colspan="3" align="center"><P>
</P>
<P>
<INPUT name="clearButton" type="reset" id="clearButton" value=" 清 空 ">
<INPUT name="registerButton" type="submit" id="registerButton" value=" 注 冊(cè) " >
</P></TD>
</TR>
</TABLE>
<P><IMG src="images/bottom.jpg" width="969" height="107" ></P>
<P> </P>
</FORM>
</HTML>onSubmit：事件屬于<form>表單元素，所以要寫在<form>標(biāo)簽內(nèi)。onSubmit="return checkEmail()"將根據(jù)返回的真/假值來(lái)決定是否提交表單數(shù)據(jù)。
三、文本框?qū)ο蟮氖录?、方法、屬?/p>
1、事件：onBlur失去焦點(diǎn)事件，當(dāng)光標(biāo)離開(kāi)某個(gè)文本框時(shí)觸發(fā)
onFocus光標(biāo)進(jìn)入某個(gè)文本框
onChang文本框的內(nèi)容被修改，即發(fā)生了改變
2、方法：focus()獲得焦點(diǎn)，即獲得鼠標(biāo)光標(biāo)
select()選中文本內(nèi)容，突出顯示輸入?yún)^(qū)域
3、屬性：value設(shè)置或獲得一個(gè)文本框值屬性的值
四、制作圖片代替按鈕的提交效果
Code
<SCRIPT language="JavaScript" >
function checkForm( )
{
if ( document.myform.txtUserName.value.length==0)
{
alert("用戶名不能為空！");
document.myform.txtUserName.focus( );
}
else
{
document.myform.submit( );
}
}
</SCRIPT>
<TR>
<TD colspan="2"><DIV align="center"><IMG src="images/regquick.jpg" width="114" height="27" onClick="checkForm( )"></DIV></TD>
</TR>
五、制作回車切換輸入效果
Code
<script language="javascript" type="text/javascript">
function changeFocus( )
{
/**//*判斷按下回車鍵的控件類型：不能是提交、重置按鈕等類型*/
if (event.keyCode==13 && event.srcElement.type!='button' && event.srcElement.type!='submit' && event.srcElement.type!='reset' && event.srcElement.type!='textarea' && event.srcElement.type!='' )
event.keyCode=9;
}
document.onkeydown= changeFocus ; //dcument對(duì)象的onkeydown事件
</script>
"event.srcElement.type"表示捕獲的事件元素的類型，對(duì)應(yīng)HTML中的元素的type值。
六 、制作即時(shí)錯(cuò)誤信息提示效果
1、通過(guò)使用alert語(yǔ)句彈出錯(cuò)誤提示警告框來(lái)實(shí)現(xiàn)。（不經(jīng)常使用）
2、通過(guò)改變層中的內(nèi)容或顯示、隱藏層來(lái)實(shí)現(xiàn)。
Code
<script language="javascript" type="text/javascript">
function checkLogin( )
{
var myDiv=document.getElementById("loginError");
myDiv.innerHTML=""; //設(shè)置層的開(kāi)始和結(jié)束標(biāo)簽之間的HTML為空
var strName=document.userfrm.loginName.value;
if (strName.length == 0)
{
myDiv.innerHTML="<font color='red'>用戶名不能為空</font>";
return;
}
}
</script>
<td width="445" align="left" bordercolor="#E7E3E7"> <input name="loginName" type="text" class="borderBox" id="loginName"
size="24" onblur="checkLogin( )">
<div id="loginError" style="display:inline"></div> </td>
注意：凡是所有的元素都有innerHTML屬性，它是一個(gè)字符串，用來(lái)設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的HTML。
如document.getElementById("info").innerHTML的值就是“文本內(nèi)容”。
類似于document.userfrm.loginName.value
有哪些方法可以實(shí)現(xiàn)動(dòng)態(tài)改變頁(yè)面內(nèi)容？
1、當(dāng)動(dòng)態(tài)顯示的內(nèi)容較少時(shí)，使用 myDiv.innerHTML=“HTML代碼”；
2、當(dāng)動(dòng)態(tài)顯示的內(nèi)容較多，并相對(duì)固定時(shí)，則預(yù)先制作好DIV內(nèi)容，
然后使用myDiv.style.display=“none/block”；
七、利用下拉列表框制作省市級(jí)聯(lián)功能
1、下拉列表框的常用事件、屬性和方法
事件 onChange 當(dāng)選項(xiàng)發(fā)生改變時(shí)產(chǎn)生
屬性 options 所有的選項(xiàng)組成一個(gè)數(shù)組，options表示整個(gè)選項(xiàng)數(shù)組，
第一個(gè)選項(xiàng)即為options[0]，第二個(gè)選項(xiàng)即為options[1]，其他類推
selectedIndex 返回被選擇地選項(xiàng)的索引號(hào)，如果選中第一個(gè)則返回0，第二個(gè)則返回1，其他類推
length 返回下拉菜單中的選項(xiàng)個(gè)數(shù)
方法 add（new，old）將新的option對(duì)象new插入到option對(duì)象old前面，如果old為空，那么直接插入到末尾
2、數(shù)組的常用屬性和方法
屬性 length
方法 join(分隔符)
sort（） 排序
Code
<SCRIPT language="JavaScript" >
function changeCity( ){
var cityList = new Array( );
cityList[0]=['成都', '綿陽(yáng)', '德陽(yáng)', '自貢', '內(nèi)江', '樂(lè)山', '南充', '雅安', '眉山', '甘孜', '涼山', '瀘州'];
cityList[1]=['濟(jì)南', '青島', '淄博', '棗莊', '東營(yíng)', '煙臺(tái)', '濰坊', '濟(jì)寧', '泰安', '威海', '日照'];
cityList[2] = ['武漢', '宜昌', '荊州', '襄樊', '黃石', '荊門', '黃岡', '十堰', '恩施', '潛江'];
//獲得省份選項(xiàng)的索引號(hào)，如四川省為1，比對(duì)應(yīng)數(shù)組索引號(hào)多1
var pIndex=document.myform.selProvince.selectedIndex-1;
var newOption1;
document.myform.selCity.options.length=0;
for (var j in cityList[pIndex])
{
newOption1=new Option(cityList[pIndex][j], cityList[pIndex][j]);
document.myform.selCity.options.add(newOption1);
}
}
</SCRIPT>
<FORM name="myform" id="myform" action="register_success.htm" onSubmit="return checkForm( )">
<SELECT name="selProvince" id="selProvince" onChange="changeCity( )">
<OPTION>--請(qǐng)選擇開(kāi)戶帳號(hào)的省份--</OPTION>
<OPTION value="四川省">四川省</OPTION>
<OPTION value="山東省">山東省</OPTION>
<OPTION value="湖北省">湖北省</OPTION>
</SELECT>
..
<SELECT name="selCity">
<OPTION>--請(qǐng)選擇開(kāi)戶帳號(hào)的城市--</OPTION>
</SELECT>
Tag標(biāo)簽: JavaScript,JS
