在一个甜蜜的警报中查看所有表单验证错误消息,而不是“请填写此字段”,可以通过以下步骤实现:
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
each()
方法遍历所有的错误消息,并将它们添加到一个字符串中。var errorMessages = ""; // 用于存储错误消息的字符串
// 遍历所有的错误消息
$(".error-message").each(function() {
var errorMessage = $(this).text(); // 获取当前错误消息的文本内容
errorMessages += errorMessage + "\n"; // 将错误消息添加到字符串中
});
// 在甜蜜的警报中显示所有的错误消息
alert(errorMessages);
在上述代码中,假设错误消息的类名为.error-message
,你可以根据实际情况进行调整。
SweetAlert2的使用示例:
首先,在HTML文件中引入SweetAlert2的CSS和JS文件:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.all.min.js"></script>
然后,在表单验证过程中,使用SweetAlert2的fire()
方法显示所有的错误消息:
var errorMessages = ""; // 用于存储错误消息的字符串
// 遍历所有的错误消息
$(".error-message").each(function() {
var errorMessage = $(this).text(); // 获取当前错误消息的文本内容
errorMessages += errorMessage + "<br>"; // 将错误消息添加到字符串中
});
// 使用SweetAlert2显示所有的错误消息
Swal.fire({
icon: 'error',
title: '表单验证错误',
html: errorMessages
});
通过上述步骤,你可以在一个甜蜜的警报中查看所有表单验证错误消息,并且不再显示默认的“请填写此字段”错误消息。
领取专属 10元无门槛券
手把手带您无忧上云