jquerymobile表单验证

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile Form Validation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
    <div data-role="header">
        <h1>Form Validation Example</h1>
    </div>

    <div data-role="content">
        <form id="myForm">
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" required>

            <label for="email">Email:</label>
            <input type="email" name="email" id="email" required>

            <input type="submit" value="Submit">
        </form>
    </div>

    <script>
        $(document).ready(function() {
            $('#myForm').on('submit', function(event) {
                if (!$(this).valid()) {
                    event.preventDefault(); // Prevent form submission if validation fails
                }
            });
        });
    </script>
</div>

</body>
</html>