用onsubmit做簡單表單驗證（37）

㼛思碼雨發表於2020-09-25
MIT

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="text.php" name="cform" method="post" onsubmit="return checkForm()">
        使用者賬戶：<input type="user"><br>
        使用者郵箱：<input type="email"><br>
        使用者電話: <input type="phone" maxlength="12"><br>
        <input type="submit" value="驗證">
    </form>
    <script>
        function checkForm() {
            var user = cform.user.value;
            var email = cform.email.value;
            var phone = cform.phone.value;
            if (user.lenth < 2) {
                alert("使用者名稱不少於2位");
                return false;
            }
            if (email.indexof("@") < 1 || email.indexof(".") < 3) {
                alert("郵箱格式示例：web@126.com");
                return false;
            }
            if (phone.charAt(0) != "0" || phone.lenth < 10 || isNaN(phone)) {
                alert("固定電話格式示例：02444523433.324235");
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

 

相關文章