据我所知，MVC 并没有真正提供“开箱即用”的客户端验证。
有第三方选项，但我更喜欢自己做，所以我用 JavaScript 手工完成了整个事情。
与 EditorFor 复合不允许像其他 Helper 方法那样添加 html 属性。
我对此的修复相当复杂，但我感觉很全面，我希望你发现它和我一样有帮助
首先在.Net中重载HtmlHelper EditorFor
public static HtmlString EditBlockFor<T, TValue>(this HtmlHelper<T> helper, Expression<System.Func<T, TValue>> prop, bool required)
{
string Block = "";
Block += "<div class='UKWctl UKWEditBox' " +
"data-oldvalue='" + helper.ValueFor(prop) + "' " +
"data-required='" + required.ToString() + ">";
Block += helper.EditorFor(prop);
Block += "</div>";
return new HtmlString(Block);
}
在 razor 视图中添加新的 editBlockfor（就像您一样），但更改 Begin Form 方法以将名称和 id 添加到表单元素，以便您以后可以识别它
@using (Html.BeginForm("Action", "Controller", FormMethod.Post, new { name = "MyDataForm", id = "MyDataForm" }))
然后当用户点击保存时，从 JavaScript 运行验证方法
function validate(container) {
var valid = true;
//use jquery to iterate your overloaded editors controls fist and clear any old validation
$(container).find(".UKWctl").each(function (index) { clearValidation($(this)); });
//then itterate Specific validation requirements
$(container).find(".UKWctl[data-required='True']").each(function (index) {
var editobj = getUKWEdit(this);
if (editobj.val() == "") {
valid = false;
//use this Method to actually add the errors to the element
AddValidationError(editobj, 'This field, is required');
//now add the Handlers to the element to show or hide the valdation popup
$(editobj).on('mouseenter', function (evt) { showvalidationContext(editobj, evt); });
$(editobj).on('mouseout', function () { hidevalidationContext(); });
//finally add a new class to the element so that extra styling can be added to indicate an issue
$(editobj).addClass('valerror');
}
});
//return the result so the methods can be used as a bool
return valid;
}
添加验证方法
function AddValidationError(element, error) {
//first check to see if we have a validation attribute using jQuery
var errorList = $(element).attr('data-validationerror');
//If not Create a new Array()
if (!errorList || errorList.length < 1) {
errorList = new Array();
} else {
//if we have, parse the Data from Json
var tmpobj = jQuery.parseJSON(errorList);
//use jquery.Map to convert it to an Array()
errorList = $.map(tmpobj, function (el) { return el; });
}
if ($.inArray(error, errorList) < 0) {
// no point in add the same Error twice (just in case)
errorList.push(error);
}
//then stringyfy the data backl to JSON and add it to a Data attribute on your element using jQuery
$(element).attr('data-validationerror', JSON.stringify(errorList));
}
最后显示和隐藏实际的错误，
为了方便这一点，我在 _Layout.html 中添加了一个小 div 元素
<div id="ValidataionErrors" title="" style="display:none">
<h3 class="error">Validation Error</h3>
<p>This item contatins a validation Error and Preventing Saving</p>
<p class="validationp"></p>
</div>
显示
var tipdelay;
function showvalidationContext(sender, evt)
{
//return if for what ever reason the validationError is missing
if ($(sender).attr('data-validationerror') == "") return;
//Parse the Error to an Object
var jsonErrors = jQuery.parseJSON($(sender).attr('data-validationerror'));
var errorString = '';
//itterate the Errors from the List and build an 'ErrorString'
for (var i = 0; i <= jsonErrors.length; i++)
{
if (jsonErrors[i]) {
//if we already have some data slip in a line break
if (errorString.length > 0) { errorString += '<br>'; }
errorString += jsonErrors[i];
}
}
//we don't want to trigger the tip immediatly so delay it for just a moment
tipdelay = setTimeout(function () {
//find the p tag tip if the tip element
var validationError = $('#ValidataionErrors').find('.validationp');
//then set the html to the ErrorString
$(validationError).html(errorString);
//finally actually show the tip using jQuery, you can use the evt to find the mouse position
$('#ValidataionErrors').css('top', evt.clientY);
$('#ValidataionErrors').css('left', evt.clientX);
//make sure that the tip appears over everything
$('#ValidataionErrors').css('z-index', '1000');
$('#ValidataionErrors').show();
}, 500);
}
隐藏（更容易隐藏）
function hidevalidationContext() {
//clear out the tipdelay
clearTimeout(tipdelay);
//use jquery to hide the popup
$('#ValidataionErrors').css('top', '-1000000px');
$('#ValidataionErrors').css('left', '-1000000px');
$('#ValidataionErrors').css('z-index', '-1000');
$('#ValidataionErrors').hide();
}
你可以尝试一些类似的东西
function save()
{
if (validate($("#MyDataForm")))
{
$("#MyDataForm").submit();
}
else {
//all the leg has been done this stage so perhaps do nothing
}
}
这是用于验证弹出窗口的我的 Css
#ValidataionErrors {
display: block;
height: auto;
width: 300px;
background-color: white;
border: 1px solid black;
position: absolute;
text-align: center;
font-size: 10px;
}
#ValidataionErrors h3 { border: 2px solid red; }
.valerror { box-shadow: 0 0 2px 1px red; }