MVC.net JQuery验证

时间:2020-03-05 18:53:02  来源:igfitidea点击:

在尝试避免使用JavaScript多年之后,Iv开始在MVC asp.net中使用JQuery进行验证,因为似乎没有官方的验证方法,因此Iv惊讶JQuery的出色表现。

首先,有没有一种方法可以让智能感知工作于JQuery及其验证插件,这样我就不必学习api?

其次,我如何为此创建验证摘要,它当前将错误添加到文本框的右侧。:

<script type="text/javascript">
$().ready(function() {
$("#CreateLog").validate({
        rules: {            
            UserName: {
                required: true,
                minLength: 2,

            }
        },
        messages: {

            UserName: {
                required: "Please enter a username",
                minLength: "Your username must consist of at least 2 characters",

            }
        }
    });
});
</script>

<form id="CreateLog" action="Create" method="post" />   
        <label>UserName</label><br />
        <%=Html.TextBox("UserName")%> 
         <br />  
          <div class="error"> </div>
        <input  type=submit value=Save />
       </form>

我尝试将其添加到脚本中:

errorLabelContainer: $("#CreateLog div.error")

和这个到HTML:

<div class="error"> </div>

但这没有用。

解决方案

回答

VS2008中有一个针对JQuery IntelliSense的Visual Studio 2008修补程序。这可能也已与SP1捆绑在一起。

回答

尝试在选项中同时指定包装器和标签容器。我还添加了display:none;错误容器的样式,让jquery决定何时显示它。

HTML:

<div class="error-container">
<ul>
</ul>
</div>
<form id="CreateLog" action="Create" method="post" />   
<label>UserName</label><br />
<%=Html.TextBox("UserName")%> 
<br />  
<input  type=submit value=Save />
</form>

脚本:

<script type="text/javascript">
$().ready(function() {
$("#CreateLog").validate({
    errorLabelContainer: $("ul", $('div.error-container')),
    wrapper: 'li',
    rules: {            
        UserName: {
            required: true,
            minLength: 2,

        }
    },
    messages: {

        UserName: {
            required: "Please enter a username",
            minLength: "Your username must consist of at least 2 characters",

        }
    }
});
});
</script>

那应该工作。

回答

关于jquery(和其他插件)的intellisense:为了在我们自己的脚本文件中也具有完整的intellisense,只需对要从中进行智能化处理的每个文件在.js文件顶部添加以下行:

/// <reference path="[insert path to script file here]" />

简单,但非常有用=)

回答

我们可能想在CodeBetter.com上及其示例应用程序画布上查看Karl Seguin的ASP.NET MVC验证方法。

验证第1部分入门

验证第2部分客户端

验证第3部分服务器端