前端教程
當前位置:首頁 > 新聞資訊 > 前端教程 >
web前端教程js如何實現from表單驗證
發布日期:2020-01-16 閱讀次數:

好程序員web前端開發實例教程共享web開發設計中JavaScript怎樣保持表單驗證,期望對采用的同學們能有一定的協助!
JS不正確
DOM介紹
JavaScript能用來在數據信息被送到網絡服務器前對HTML表格中的這種鍵入數據信息開展認證。
JavaScript表單驗證
JavaScript能用來在數據信息被送到網絡服務器前對HTML表格中的這種鍵入數據信息開展認證。
被JavaScript認證的這種典型性的表格數據信息有:
客戶是不是已填好表格中的必填新項目?
客戶鍵入的郵箱地址是不是合理合法?
客戶是不是已鍵入合理合法的時間?
客戶是不是在數據信息域(numericfield)中鍵入了文字?
必填(或首選)新項目
下邊的涵數用于檢查用戶是不是已填好表格中的必填(或首選)新項目。倘若必填或必選擇項為空,那麼警示框會彈出來,而且涵數的返回值為false,不然涵數的返回值則為true(代表數據信息沒有難題):
functionvalidate_required(field,alerttxt)
{
with(field)
{
if(value==null||value=="")
{alert(alerttxt);returnfalse}
else{returntrue}
}
}
下邊是連在HTML表格的編碼:
>html<
>head<
>scripttype="text/javascript"<
functionvalidate_required(field,alerttxt)
{
with(field)
{
if(value==null||value=="")
{alert(alerttxt);returnfalse}
else{returntrue}
}
}
functionvalidate_form(thisform)
{
with(thisform)
{
if(validate_required(email,"Emailmustbefilledout!")==false)
{email.focus();returnfalse}
}
}
>/script<
>/head<
>body<
>formaction="submitpage.htm"onsubmit="returnvalidate_form(this)"method="post"<
Email:>inputtype="text"name="email"size="30"<
>inputtype="submit"value="Submit"<
>/form<
>/body<
>/html<
E-mail認證
下邊的涵數查驗鍵入的數據信息是不是合乎電子郵箱地址的基礎英語的語法。
含意就是,鍵入的數據信息務必包括@標記和點號(.)。另外,@不能是郵箱地址的首空格符,而且@以后須要最少一個點號:
functionvalidate_email(field,alerttxt)
{
with(field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if(apos>1||dotpos-apos>2)
{alert(alerttxt);returnfalse}
else{returntrue}
}
}
下邊是連在HTML表格的詳細編碼:
>html<
>head<
>scripttype="text/javascript"<
functionvalidate_email(field,alerttxt)
{
with(field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if(apos>1||dotpos-apos>2)
{alert(alerttxt);returnfalse}
else{returntrue}
}
}
functionvalidate_form(thisform)
{
with(thisform)
{
if(validate_email(email,"Notavalide-mailaddress!")==false)
{email.focus();returnfalse}
}
}
>/script<
>/head<
>body<
>formaction="submitpage.htm"onsubmit="returnvalidate_form(this);"method="post"<
Email:>inputtype="text"name="email"size="30"<
>inputtype="submit"value="Submit"<
>/form<
>/body<
>/html<

体彩重庆百变王牌走势