用onsubmit做简单表单验证（37）

最新推荐文章于 2022-06-04 16:25:56 发布

㼛思雨

最新推荐文章于 2022-06-04 16:25:56 发布

阅读量862

点赞数

分类专栏： HTML5和CSS3进阶文章标签： css3 javascript html5

本文链接：https://blog.csdn.net/weixin_45147894/article/details/108805957

版权

HTML5和CSS3进阶专栏收录该内容

37 篇文章 2 订阅

订阅专栏

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