使用jQuery来实现手机号码验证的HTML5页面示例-优快云博客

本文链接：https://blog.youkuaiyun.com/suny2020/article/details/144229909

使用jQuery来实现手机号码验证的HTML5页面示例如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>手机号码验证</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        form {
            margin: 20px;
            padding: 20px;
            border: 1px solid #ccc;
        }
        label, input, button {
            display: block;
            margin-bottom: 10px;
        }
        input, button {
            width: 200px;
        }
        #message {
            color: red;
            margin-top: 10px;
        }
    </style>
    <script>
        $(document).ready(function() {
            $('#phoneForm').submit(function(e) {
                e.preventDefault(); // 阻止表单默认提交行为
                var phoneNumber = $('#phoneNumber').val();
                if (validatePhone(phoneNumber)) {
                    $('#message').text('手机号码格式正确').css('color', 'green');
                } else {
                    $('#message').text('手机号码格式错误').css('color', 'red');
                }
            });
        });

        function validatePhone(phoneNumber) {
            var phoneRegex = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            return phoneRegex.test(phoneNumber);
        }
    </script>
</head>
<body>
    <h1>请输入手机号码进行验证</h1>
    <form id="phoneForm">
        <label for="phoneNumber">手机号码:</label>
        <input type="tel" id="phoneNumber" name="phoneNumber" required>
        <button type="submit">提交验证</button>
        <div id="message"></div>
    </form>
</body>
</html>

这个页面如下：

引入jQuery：通过<script>标签引入了jQuery库，以便使用jQuery提供的功能。
DOM加载完成后绑定事件：使用$(document).ready()确保DOM完全加载后再绑定事件处理器。
阻止表单提交：使用e.preventDefault()阻止表单的默认提交行为，以便在客户端进行手机号码验证。
验证手机号码：validatePhone函数使用正则表达式来验证手机号码格式是否正确。
显示验证结果：根据验证结果，使用jQuery的.text()和.css()方法来更新消息内容和颜色。
表单和样式：与之前的示例类似，包含了一个输入手机号码的<input>元素，一个提交按钮<button>，以及一个用于显示验证结果的<div>元素。