jQuery 实现姓名、邮箱、电话表单验证：成功显示消息，失败提示错误

当然！下面是一个简单的示例，展示了如何使用 jQuery 进行表单验证，包括姓名、电子邮件和电话号码字段。如果表单字段为空或电子邮件格式不正确，将显示错误消息；如果验证成功，则显示“表单验证成功”的消息。首先，确保你的 HTML 文件中包含了 jQuery 库。你可以从 CDN 加载它： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form Validation</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="submit">提交</button> </form> <div id="message"></div> <script> $(document).ready(function() { $('#myForm').on('submit', function(event) { event.preventDefault(); // 阻止表单提交 var name = $('#name').val(); var email = $('#email').val(); var phone = $('#phone').val(); var messageDiv = $('#message'); var isValid = true; // 清空之前的消息 messageDiv.empty().removeClass('error success'); // 验证姓名是否为空 if (name === '') { messageDiv.addClass('error').text('姓名不能为空'); isValid = false; } // 验证电子邮件格式 var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (email === '') { messageDiv.addClass('error').text('电子邮件不能为空'); isValid = false; } else if (!emailPattern.test(email)) { messageDiv.addClass('error').text('电子邮件格式不正确'); isValid = false; } // 验证电话号码是否为空（这里只是简单验证是否为空，可以根据需要添加更多格式验证） if (phone === '') { messageDiv.addClass('error').text('电话号码不能为空'); isValid = false; } // 如果所有字段都有效，显示成功消息 if (isValid) { messageDiv.addClass('success').text('表单验证成功'); } }); }); </script> </body> </html> ``` 解释 1. HTML 部分: - 创建一个包含姓名、电子邮件和电话号码的表单。 - 添加一个 `<div>` 元素用于显示消息。 2. CSS 部分: - 定义 `.error` 和 `.success` 类，用于设置错误和成功消息的样式。 3. jQuery 部分: - 使用 `$(document).ready()` 确保 DOM 完全加载后再运行脚本。 - 监听表单的 `submit` 事件，并阻止默认提交行为。 - 获取表单字段的值并进行验证。 - 根据验证结果更新消息 `<div>` 的内容和样式。这个示例展示了基本的表单验证逻辑，你可以根据需要进一步扩展和自定义。 ######[AI写代码神器 | 858点数解答 | 2024-10-26 23:36:38]

服务商

更多选项

快捷项

自定义