2.html5表单验证

作者：System 时间：2024年08月08日分类：所有,html5 字数：985

HTML5引入了新的表单验证API，可以用来进行表单验证而不需要额外的JavaScript代码。以下是一个简单的HTML5表单验证示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Form Validation Example</title>
</head>
<body>
    <form id="myForm">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required pattern="[A-Za-z]{3,15}">
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <input type="submit" value="Submit">
    </form>
    <script>
        const form = document.getElementById('myForm');
        form.onsubmit = function(event) {
            if (!form.checkValidity()) {
                event.preventDefault();
                alert('Form is not valid!');
            }
        };
    </script>
</body>
</html>

在这个例子中，我们有一个带有两个输入字段的表单：用户名和电子邮件。required属性表示这些字段是必填的，pattern属性用于定义一个正则表达式用于验证输入值。如果表单提交而没有通过验证，将会显示一个警告。

2.html5表单验证

评论已关闭

推荐阅读