我正在努力在我的网页上显示验证消息。 我有一个javascript函数，它进行客户端验证并突出显示无效值的字段。除了突出显示字段外，我想在我的网页上显示一条消息，我不知道该怎么做。
这是我的javascript函数：
$(function () {
$("#Save").click(Validate);
});
function Validate() {
var invalidValues = [];
var validValues = [];
var Code = $("#Code").val();
var Description = $("#Description").val();
var Status = $("#Status ").val();
var requiredFields = { '#Code' : Code,
'#Description' : Description,
'#Status ' : Status };
$.each(requiredFields, function (key, value) {
if (value.length == 0) {
invalidValues.push(key);
}
else { validValues.push(key); }
});
var invalidFields = invalidValues.toString();
var validFields = validValues.toString();
if (invalidValues.length > 0){
$(invalidFields).addClass("highlighted");
$(validFields).removeClass("highlighted");
return false;
}
$(validFields).removeClass("highlighted");
}
这是我的网页：
<div>
<table>
<tr>
<th>
Code
</th>
<td>
<input maxlength="4" id="Code" type="text"/>
</td>
</tr>
<tr>
<th>
Description
</th>
<td>
<input id="Description" type="text"/>
</td>
</tr>
<tr>
<th>
Status
</th>
<td>
<input id="Status" type="text"/>
</td>
</tr>
<tr>
<th>
</th>
<td>
<button id="Save" type="button">Save</button>
</td>
</tr>
</table>
</div>
我想在我的网页底部显示一条消息“请输入有效值：代码”。我在我的js函数“Validate”中将无效值存储在变量“invalidValues”中如何在我的网页中访问这些值？
我还有一些问题，关于进行验证的最佳方法是什么？客户端与服务器端？另外，最好是在网页上显示弹出验证消息或突出显示的消息吗？
答案 0 :(得分：1)
只需在HTML中为错误消息添加占位符即可。例如：
<td>
<input id="Description" type="text"/><span id="descriptionErrorPlaceholder" />
</td>
然后在你的javascript中，使用jQuery或常规javascript添加你的警告信息。
$("#descriptionErrorPlaceholder").text("Warning message");
答案 1 :(得分：1)
在您验证后，只需通过document.get（'div_id'）访问该div，然后为其赋值。
使用此功能，您甚至可以使用红色和其他颜色显示验证。 并且这样显示比弹出窗口更好，因为当软件使用时，cliks的数量应该是最小的。
答案 2 :(得分：1)
如果您已经在使用jQuery，那么您可以获得用户jQuery Validation插件的批准，因为无论何时启动新项目，它都是Microsoft MVC应用程序的标准。话虽如此，我确实认识到获得插件有多难，因为我支持不同的政府客户。看起来您可以为每个输入元素添加一个标记，然后修改该范围的类以显示和隐藏它，类似于突出显示输入框时的操作。
我无法在我的工作机器上测试这个，但我认为它类似于：
$(function () {
$("#Save").click(Validate);
});
function Validate() {
var invalidValues = [];
var validValues = [];
var Code = $("#Code").val();
var Description = $("#Description").val();
var Status = $("#Status ").val();
var requiredFields = { '#Code' : Code,
'#Description' : Description,
'#Status ' : Status };
$.each(requiredFields, function (key, value) {
if (value.length == 0) {
invalidValues.push(key);
}
else { validValues.push(key); }
});
var invalidFields = invalidValues.toString();
var validFields = validValues.toString();
if (invalidValues.length > 0){
$(invalidFields).addClass("highlighted");
$(validFields).removeClass("highlighted");
$(invalidFields + "Validator").addClass("showValidation");
$(invalidFields + "Validator").removeClass("hideValidation");
return false;
}
$(validFields).removeClass("highlighted");
$(validFields + "Validator").removeClass("showValidation");
$(invalidFields + "Validator").addClass("hideValidation");
}
使用HTML
<div>
<table>
<tr>
<th>
Code
</th>
<td>
<input maxlength="4" id="Code" type="text"/><span id="CodeValidator" class="hideValidation" />
</td>
</tr>
<tr>
<th>
Description
</th>
<td>
<input id="Description" type="text"/><span id="DescriptionValidator" class="hideValidation" />
</td>
</tr>
<tr>
<th>
Status
</th>
<td>
<input id="Status" type="text"/><span id="StatusValidator" class="hideValidation" />
</td>
</tr>
<tr>
<th>
</th>
<td>
<button id="Save" type="button">Save</button>
</td>
</tr>
</table>
</div>
答案 3 :(得分：1)
我不熟悉MVC来回答有关如何使用内置验证（就像普通的ASP.Net一样），假设MVC开始使用它。
这个小免责声明，下面的代码应该验证您的表单是否包含必填字段，并在页面上为您的用户发送消息：
$(function () {
var Validate = function Validate(e) {
var allFieldsValid = false, // boolean flag to cache result
invalidFields = [], // array for selectors
validFields = [], // array for selectors
requiredFields = [ // array of selectors to validate against
"#Code",
"#Description",
"#Status"
],
message = $('<span />').addClass('validation-message').text('* This is a required field.');
$(requiredFields.join(', ')).each(function (i, elem) {
//requiredFields.join(', ') should return "#Code, #Description, #Status"
var field = $(elem)
value = field.val();
if (value.length === 0) {
invalidFields.push(field.selector);
} else {
validFields.push(field.selector);
}
});
allFieldsValid = invalidFields.length === 0; // if there are no invalid fields, all fields must be valid
$('span.validation-message').remove(); // remove any previous validation messages
$(validFields.join(', ')).removeClass("highlighted"); // remove class from all valid fields
// add class to all invalid fields and append message
$(invalidFields.join(', ')).addClass("highlighted").append(message.clone());
if (!allFieldsValid) {
e.preventDefault(); // invalid fields, prevent event from bubbling
}
return allFieldsValid; // return result
};
$("#Save").click(Validate);
});
至于您关于验证的其他问题：
按顺序：
没有对抗。有服务器端，或者客户端和服务器端。这是因为您不能依赖您的用户启用JavaScript，因此您无法依赖客户端来运行。将客户端视为预过滤器。客户端的目的是进行“预检查”并防止不需要的数据耗尽带宽（发送到服务器和“坏数据”响应）以及使用服务器上的处理周期。客户端也将比服务器端响应更快（因为没有请求 - 响应），但这实际上只是高延迟连接的感知性能问题。 服务器端将始终运行，因此验证应始终在服务器上启动。
这是您的用户首选的问题。就个人而言，我不会编写弹出窗口，除非有人非常好地告诉我这样做，主要是因为它将焦点从表格上移开并需要额外的工作（通常是一次点击）才能解散。突出显示的消息不必执行其中任何一个，并且某些验证例程甚至足以将焦点放在第一个无效字段上。如果页面上有空间，每个字段旁边的消息都很方便，看起来非常好。但是，如果页面上的空间非常宝贵，那么大多数验证例程会在字段旁边放一个星号，并在页面上的一个位置上显示所有单独的验证消息。