JavaScript表單驗(yàn)證和E-mail驗(yàn)證如何實(shí)現(xiàn)

發(fā)布時間：2022-02-22 09:49:31 來源：億速云閱讀：117 作者：小新欄目：開發(fā)技術(shù)

這篇文章給大家分享的是有關(guān)JavaScript表單驗(yàn)證和E-mail驗(yàn)證如何實(shí)現(xiàn)的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

JavaScript 表單驗(yàn)證
JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對 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)為空，那么警告框會彈出，并且函數(shù)的返回值為 false：

function validate_required(field,alerttxt) {
    with (field) {
        if (value==null||value=="") {alert(alerttxt);return false}
        else {return true}
    }
}

下面是連同 HTML 表單的代碼：

<html>
<head>
<script>
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ù)是否符合電子郵件地址的基本語法。
輸入值必須包含 @ 符號和點(diǎn)號 "."。同時，@ 不可以是首字符，@ 之后至少有一個點(diǎn)號：

<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>

感謝各位的閱讀！關(guān)于“JavaScript表單驗(yàn)證和E-mail驗(yàn)證如何實(shí)現(xiàn)”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

JavaScript表單驗(yàn)證和E-mail驗(yàn)證如何實(shí)現(xiàn)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽