JavaScript表單驗(yàn)證實(shí)現(xiàn)代碼
JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證
JavaScript 表單驗(yàn)證
JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。
被 JavaScript 驗(yàn)證的這些典型的表單數(shù)據(jù)有:
用戶是否已填寫表單中的必填項(xiàng)目?
用戶輸入的郵件地址是否合法?
用戶是否已輸入合法的日期?
用戶是否在數(shù)據(jù)域 (numeric field) 中輸入了文本?
必填(或必選)項(xiàng)目
下面的函數(shù)用來檢查用戶是否已填寫表單中的必填(或必選)項(xiàng)目。假如必填或必選項(xiàng)為空,那么警告框會(huì)彈出,并且函數(shù)的返回值為 false,否則函數(shù)的返回值則為 true(意味著數(shù)據(jù)沒有問題):
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
下面是連同 HTML 表單的代碼:
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
E-mail 驗(yàn)證
下面的函數(shù)檢查輸入的數(shù)據(jù)是否符合電子郵件地址的基本語法。
意思就是說,輸入的數(shù)據(jù)必須包含 @ 符號(hào)和點(diǎn)號(hào)(.)。同時(shí),@ 不可以是郵件地址的首字符,并且 @ 之后需有至少一個(gè)點(diǎn)號(hào):
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
下面是連同 HTML 表單的完整代碼:
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery validate.js表單驗(yàn)證的基本用法入門
- js 常用正則表達(dá)式表單驗(yàn)證代碼
- JavaScript 表單驗(yàn)證正則表達(dá)式大全[推薦]
- AngularJS實(shí)現(xiàn)表單驗(yàn)證
- javascript制作的簡(jiǎn)單注冊(cè)模塊表單驗(yàn)證
- 收藏的js表單驗(yàn)證控制代碼大全
- AngularJS使用ngMessages進(jìn)行表單驗(yàn)證
- JavaScript 使用正則表達(dá)式進(jìn)行表單驗(yàn)證的示例代碼
- javascript表單驗(yàn)證 - Parsley.js使用和配置
- 工作中常用到的JS表單驗(yàn)證代碼(包括例子)
相關(guān)文章
使用typescript快速開發(fā)一個(gè)cli的實(shí)現(xiàn)示例
這篇文章主要介紹了使用typescript快速開發(fā)一個(gè)cli的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
js實(shí)現(xiàn)頁面跳轉(zhuǎn)的五種方法推薦
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)頁面跳轉(zhuǎn)的五種方法推薦。小編覺得挺不錯(cuò)的?,F(xiàn)在分享給大家,讓大家參考一下2016-03-03
echarts學(xué)習(xí)之legend點(diǎn)擊事件解讀
這篇文章主要介紹了echarts學(xué)習(xí)之legend點(diǎn)擊事件解讀,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03
原生js的ajax和解決跨域的jsonp(實(shí)例講解)
下面小編就為大家?guī)硪黄鷍s的ajax和解決跨域的jsonp(實(shí)例講解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
JavaScript緩動(dòng)動(dòng)畫函數(shù)的封裝方法
這篇文章主要為大家詳細(xì)介紹了JavaScript緩動(dòng)動(dòng)畫函數(shù)的封裝方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11
動(dòng)態(tài)更新highcharts數(shù)據(jù)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄獎(jiǎng)討B(tài)更新highcharts數(shù)據(jù)的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05

