jQuery实现表单验证：姓名、邮箱、电话一个都不能少！

要实现你所描述的功能，我们首先需要创建一个HTML表单，然后使用jQuery来编写验证逻辑。下面是一个完整的示例，包括HTML和jQuery代码： HTML部分 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单验证示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> .error { color: red; } .success { color: green; } </style> </head> <body> <form id="myForm"> <label for="name">姓名:</label> <input type="text" id="name" name="name"> <br><br> <label for="email">电子邮件:</label> <input type="text" id="email" name="email"> <br><br> <label for="phone">电话号码:</label> <input type="text" id="phone" name="phone"> <br><br> <button type="button" id="submitbtn">提交</button> </form> <div id="message"></div> <script> $(document).ready(function() { $("#submitbtn").click(function() { var name = $("#name").val(); var email = $("#email").val(); var phone = $("#phone").val(); var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (name === "" || email === "" || phone === "") { $("#message").html("<span class='error'>所有字段都是必填项。</span>"); } else if (!emailRegex.test(email)) { $("#message").html("<span class='error'>电子邮件格式不正确。</span>"); } else { $("#message").html("<span class='success'>表单验证成功。</span>"); } }); }); </script> </body> </html> ``` 代码解释 1. HTML结构: - 表单包含三个输入字段：`姓名`、`电子邮件`和`电话号码`。 - 按钮用于触发表单验证。 - `<div id="message"></div>` 用于显示验证结果的消息。 2. CSS样式: - `.error` 类用于显示红色的错误消息。 - `.success` 类用于显示绿色的成功消息。 3. jQuery脚本: - 使用 `$(document).ready()` 确保DOM完全加载后再执行脚本。 - 绑定点击事件到按钮 `#submitbtn`。 - 获取表单字段的值。 - 使用正则表达式 `emailRegex` 验证电子邮件格式。 - 根据验证结果更新 `#message` 元素的内容，显示相应的消息。这样，当用户点击提交按钮时，表单将进行验证，并根据验证结果显示相应的消息。 ######[AI写代码神器 | 629点数解答 | 2024-10-29 09:16:19]

服务商

更多选项

快捷项

自定义