html:
<form ?onsubmit="return validate_form(this);" method="post">
? ? ? ? ? ? email:<input type="text" name="email" >
? ? ? ? ? ?<input type="submit" value="submit">
</form>
js:
function validate_email(field,alerttxt)//這個(gè)函數(shù)用來驗(yàn)證email的格式是否滿足xxx@xxx.xxx的格式,其中要求@前面必須要至少一個(gè)字符,@與.之間至少要有一個(gè)字符
{
? ? ? ? with (field)//使用with (XXX)語句是指定默認(rèn)對(duì)象撒桨,這樣在訪問這個(gè)HTML元素(就是這里的field)的值的時(shí)候魏烫,就不需要指定對(duì)象了检痰,可以直接使用value.indexOf难咕。否則的話峰弹,需要field.value.indexOf
? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? ? ? apos=value.indexOf("@");//找到第一個(gè)@的位置回怜。如果找不到的話,apos值為-1,找到的話就是@在字符串里面的以0開始的位置索引
? ? ? ? ? ? ? ? ? ? ? ? ? dotpos=value.lastIndexOf(".")//找到最后一個(gè).的位置
? ? ? ? ? ? ? ? ? ? ? ? ? if (apos<1||dotpos-apos<2)//如果找不到@或者@是第一個(gè)字符(apos<1)央拖,或者@之后沒有.或者@與.之間沒有任何字符(dotpos-apos<2)
? ? ? ? ? ? ? ? ? ? ? ? ? {alert(alerttxt);return false}//彈出對(duì)話框顯示錯(cuò)誤消息并返回假表明驗(yàn)證email格式失敗
? ? ? ? ? ? ? ? ? ? ? ? ? else {return true}//否則返回真
? ? ? ? ?}
}
function validate_form(thisform)//這個(gè)函數(shù)用來在表單提交時(shí)對(duì)表單做驗(yàn)證,通常的使用方式是表單里面有個(gè)提交按鈕在點(diǎn)擊時(shí)調(diào)用這個(gè)函數(shù)鹉戚,如下例所示鲜戒,當(dāng)這個(gè)函數(shù)返回假的時(shí)候,表單不會(huì)提交
?{
? ? ? ? ? ? ? with (thisform)
? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? ? ? if (validate_email(email,"請(qǐng)輸入正確的郵件地址抹凳!")==false);//調(diào)用validate_email來驗(yàn)證表單中的email這個(gè)字段 遏餐,判斷是否失敗
? ? ? ? ? ? ? ? ? ? ? ? ? {email.focus();return false}//如果失敗的話,讓email獲得焦點(diǎn)赢底,同時(shí)返回假使的表單不提交
? ? ? ? ? ? ?}
}