asp.net MVC的验证提取简单快捷的验证方式(jquery.validate.unobtrusive.js)

来源:互联网 发布:粤语搞笑网名 知乎 编辑:程序博客网 时间:2024/05/18 09:17
应用
一、引入 <script src="Scripts/jquery-1.7.1.min.js"></script>

<script src="Scripts/jquery.validate.js"></script>

<script src="Scripts/jquery.validate.unobtrusive.js"></script>

二、
1)在需要验证的input标签上添加属性data-val="true",即表示改标签参加验证。
2)继续在标签上添加属性data-val-required="用户名不能为空!",表示此标签的内容不能为空的验证。
三、
显示验证信息,有两种方式显示。一种是集中显示验证信息,另一种是在具体位置显示相对应的验证信息。
1)在需要显示验证信息的位置写入以下代码
<div class="validation-summary-valid" data-valmsg summary="true">
<ul>
<li style="display: none"></li>
</ul>
</div>
2)相对应的验证信息显示
<input type="text" name="cus" id="cus" data-val="true" data-val-required="用户名不能为空!" />
<span data-valmsg-for="cus" data-valmsg-replace="true"></span>
以上三部即可完成最基本简单的验证。
如需添加标签的其他验证只需重复第二部即可。

验证规则
一、简单规则
刚才我们知道了data-val-required是必输字段,简单的验证规则如下
1.data-val-required 必输字段
2.data-val-email 必须输入正确格式的电子邮件
3.data-val-url 必须输入正确格式的网址
4.data-val-date 必须输入正确格式的日期
5.data-val-digits: 必须输入正整数
6.data-val-number:必须输入整数

二、复杂一点的规则
我们知道了简单基本的验证规则,但这些不能满足我们的需求。

1.比如注册确认密码的验证
(data-val-equalto="密码和确认密码不匹配。" data-val-equalto-other="pwd")
这时只设置一个属性不能满足我们的需求。因为我们要找到另一个文本框的值。data-val-equalto-other对应另一个文本框的name的值

1 <div class="control-group">
2 <label class="control-label">
3 *密码
4 </label>
5    <div class="controls">
6 <input type="password" name="pwd" id="pwd" data-val="true" data-val-required="密码不能为空!" />
7 <span data-valmsg-for="pwd" data-valmsg-replace="true"></span>
8 </div>
9 </div>
10 <div class="control-group">
11 <label class="control-label">
12 *确认密码
13 </label>
14 <div class="controls">
15 <input type="password" name="Password1" id="Password1" data-val="true" data-val-required="确认密码不能为空!" data-val-equalto="密码和确认密码不匹配。" data-val-equalto-other="pwd" />
16 <span data-valmsg-for="Password1" data-valmsg-replace="true"></span>
17 </div>
18</div>
2.data-val-length 字符的长度 ,data-val-length-max表示最大字符数 data-val-length-min 表示最小字符数

1 <div class="control-group">
2 <label class="control-label">
3 *密码
4 </label>
5 <div class="controls">
6 <input type="password" name="pwd" id="pwd" data-val="true" data-val-required="密码不能为空!" data-val-length-max="100" data-val-length-min="6" data-val-length="密码必须至少包含 6 个字符。" />
7 <span data-valmsg-for="pwd" data-valmsg-replace="true"></span>
8 </div>
9 </div>
3.data-val-accept 正确的后缀名,data-val-accept-exts 符合后缀名的集合
data-val="true" data-val-required="不能为空!" data-val-accept="后缀名为.jpg、.gif或.png" data-val-accept-exts="jpg|gif|png"

4.data-val-range 数字的大小范围,data-val-range-min 最小数 data-val-range-max 最大数

三、再复杂一点的规则(正则)
以上的验证规则需要两个或者两个以上的属性才能完成验证,但是这些仍然不能满足我们的需求。比如手机格式的验证,这些我们可能需要正则来辅助我们验证

data-val-regex表示正则的验证方式,data-val-regex-pattern正则的表达式

1 <div class="controls">
2 <input type="text" id="regex" name="regex" data-val="true" data-val-required="不能为空!" data-val-regex="手机格式不正确" data-val-regex-pattern="(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}" />
3 <span data-valmsg-for="regex" data-valmsg-replace="true"></span>
4 </div>


四、再再复杂一点的规则(ajax)
有点时候我们需要ajax来验证规则,比如我们常见的检查用户名是否可用

data-val-remote可以帮助我们实现功能,data-val-remote-url表示ajax验证的路径,直接返回true or false 即可完成验证。

1 <div class="controls">
2 <input type="text" name="loginName" data-val="true" data-val-required="登录名不能为空!" data-val-remote="已经被注册,请选择其他登录名称!" data-val-remote-url="checkuserid.aspx" />
3 <span data-valmsg-for="loginName" data-valmsg-replace="true"></span>
4 </div>
五、终极验证规则(自定义验证规则)
虽然以上验证规则足够可以我们使用,但是可能需要我们自定义的验证规则。
熟悉jQuery validate的验证方式知道可以添加自定义的验证规则,因为此验证规则是对jQuery validate的扩展,所以需要在jQuery validate的基础上进行自定义验证。

1)添加jQuery validate自定义验证方法

判断值是否等于“123”

1 $.validator.addMethod('notequal', function (value, element, params)
2   {
3 return value != "123";
4   });
2)添加扩展方法的自定义方法

1 $.validator.unobtrusive.adapters.add("notequal", function (options)
2 {
3 options.rules["notequal"] = {
4
5 };
6 options.messages["notequal"] = options.message;
7 });
3)data-val-notequal="姓名不能等于 123"

1 <input type="text" value="" name="cus" id="cus" data-val="true" data-val-notequal="姓名不能等于 123"/>
2 <span data-valmsg-for="cus" data-valmsg-replace="true"></span>
这样即可完成简单的自定义验证规则。

有的时候我们需要指定参数来实现自定义验证规则


1 $.validator.addMethod('notequal', function (value, element, params)
2 {
3 return value != params["va"];
4 });
5
6 $.validator.unobtrusive.adapters.add("notequal", ["va"], function (options)
7 {
8 options.rules["notequal"] = {
9 va: options.params.va
10 };
11 options.messages["notequal"] = options.message;
12 });
1 <input type="text" value="" name="cus" id="cus" data-val="true" data-val-notequal="姓名不能够等于 123" data-val-notequal-va="123"/>
2 <span data-valmsg-for="cus" data-valmsg-replace="true"></span>


====================================================================================================================================

http://blog.csdn.net/lee576/article/details/3439072 这一篇博客 讲的是jquery.validate.js

=========================================================================


Razor 语法与jquery.validate.unobtrusive.js 一起使用


前台:
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>DataEntities</legend>

<div class="editor-label">
@Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Age)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Age)
@Html.ValidationMessageFor(model => model.Age)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.imageUrl)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.imageUrl)
@Html.ValidationMessageFor(model => model.imageUrl)
</div>

<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
entityframework创建的都是部分类,你可以自己再定义一个部分类例如:
后台:
public partial class DataEntities
{
[Required(ErrorMessage="必须")]
[StringLength(10,ErrorMessage="长度太长")]
[Range(10,20,ErrorMessage="测试")]
public int ID { get; set; }
public string Name { get; set; }
public int Age { get; set; }
public string imageUrl { get; set; }
}

0 0