Skip to main content
 首页 » 编程设计

jquery之将 asp mvc3 不引人注目的验证与 jquery 验证插件混合

2026年07月28日7mq0036

对于 asp mvc3 客户端验证,是否可以将默认的、开箱即用的不引人注目的样式与 jquery 验证插件混合在一起?

这是 View 中的表单:

@using (Html.BeginForm("", "", FormMethod.Post, new { id = "newRatingForm" })) 
{    
    @Html.ValidationSummary(true) 
    <fieldset> 
        <legend>Rating</legend> 
 
        <div class="editor-label"> 
            @Html.LabelFor(model => model.Rate) 
        </div> 
        <div class="editor-field"> 
            @Html.EditorFor(model => model.Rate) 
            @Html.ValidationMessageFor(model => model.Rate) 
        </div> 
 
        <div class="editor-label"> 
            @Html.LabelFor(model => model.Email) 
        </div> 
        <div class="editor-field"> 
            @Html.EditorFor(model => model.Email) 
            @Html.ValidationMessageFor(model => model.Email) 
        </div> 
 
        <p> 
            <input type="submit" value="Create" /> 
        </p> 
    </fieldset> 
} 

默认情况下,Unobtusive 使用模型属性上的常用验证属性效果很好。目标是用 [fyneworks][1] jquery 星级评分插件替换表单中的“model.Rate”位,并仅针对表单的该部分使用 jquery 验证插件:

<span>Your Rating:</span> 
<div id="ratingStars"> 
    <input class="star {split:2}" type="radio" name="Rating" value="0.5"/> 
    <input class="star {split:2}" type="radio" name="Rating" value="1.0"/> 
    <input class="star {split:2}" type="radio" name="Rating" value="1.5"/> 
    <input class="star {split:2}" type="radio" name="Rating" value="2.0"/> 
    <input class="star {split:2}" type="radio" name="Rating" value="2.5"/> 
    <input class="star {split:2}" type="radio" name="Rating" value="3.0"/> 
    <input class="star {split:2}" type="radio" name="Rating" value="3.5"/> 
    <input class="star {split:2}" type="radio" name="Rating" value="4.0"/> 
    <input class="star {split:2}" type="radio" name="Rating" value="4.5"/> 
    <input class="star {split:2}" type="radio" name="Rating" value="5.0"/> 
</div> 

我劫持了表单的提交操作,并将表单值转换为 Json 以执行 ajax 请求:

$("#newRatingForm").submit(function (event) { 
    event.preventDefault(); 
 
    if ($(this).valid()) {         
        newRatingSubmit(); 
    }     
});  
 
function newRatingSubmit() { 
    //jquery ajax request using form values converted to Json 
} 

单选按钮似乎破坏了表单,并且劫持代码不再起作用,即当我单击“提交”时,没有向服务器发出请求(在 firebug 控制台上观看)并且表单就消失了。再说一次,只要使用普通的 mvc3 形式,一切都可以正常工作。

我尝试为评级单选按钮添加 jquery 验证规则,但似乎没有任何区别:

$("#newRatingForm").validate({ 
    meta: "validate",  
    errorLabelContainer: "#ErrorDiv", 
    wrapper: "div", 
    rules: 
    { 
        Rating: { 
            required: true 
        } 
    }, 
 
    messages: 
    { 
        Rating: { 
            required: 'A Rating required.' 
        } 
    }, 
 
    onfocusout: false, 
    onkeyup: false, 
 
    //handle validation ok, POST submit 
    submitHandler: function (label) { 
        newRatingSubmit(); 
    } 
 }); 

作为替代方案,我可以使用 jquery 验证插件使用星级评分插件来验证标准 html 表单,并使用上面的代码提交该表单,但这看起来不太“asp.net mvc”。例如,我需要 2 组验证消息 - 一组用于使用验证属性的服务器,另一组用于客户端 View 。

请您参考如下方法:

jQuery.validator.addMethod("methodeName", function (value, element, params) { 
        if (somthing) { 
            return false; 
        } 
        return true; 
    }); 
 
    jQuery.validator.unobtrusive.adapters.addBool("methodeName"); 

并在html中添加2个属性

dal-val = true 且dal-val-methodName="errorMessage"