如何在.net/MVC4中自定义页面验证的前端脚本

其实是很少发技术类文章的, 只是在最近的一次项目中,由于这个位置的技术短板导致折腾好几天,而网上搜的内容又都不直接说明,所以还是决定写出来给人参考一下, 可以帮助大家省点时间。

先来看一下需求:

很是草稿的图片请别介意。需求是这样,当选中图中的下拉菜单选项为第一个时,使用文字验证,当下拉菜单选为第二个选项时,使用数字验证。

这种需求其实比较普遍,很多流程化管理的页面都会有这种需求。比如在申请证件时候可选项是护照还是身份证的时候,对填入内容的验证规则可以是不一样的。

但微软自带的model绑定规则是只能适用一种规则,因此我们需要自己重写验证规则来满足我们的需求。

因此,我们写下的代码可能会是这样的:

[Required]
[Display(Name = "User name")]
public string UserName { get; set; }

这只是实现了其中一种“必填”的策略罢了

所以我们要解决我们面临的问题的第一步是需要做一个定制化的属性标签。

[AttributeUsage(AttributeTargets.Field | AttributeTargets.Property, AllowMultiple = true, Inherited = true)]

public  class CustomdropdownlistAttribute : ValidationAttribute, IClientValidatable

{

private const string _defaultErrorMessage = "‘{0}‘ must be at least {1} characters long.";

private readonly int _minCharacters = Membership.Provider.MinRequiredPasswordLength;

public CustomdropdownlistAttribute()

: base(_defaultErrorMessage)

{

}

public override string FormatErrorMessage(string name)

{

return String.Format(CultureInfo.CurrentCulture, ErrorMessageString,

name, _minCharacters);

}

protected override  ValidationResult IsValid(object value, ValidationContext validationContext)

{

string valueAsString = value as string;

var containerType = validationContext.ObjectInstance.GetType();

var field = containerType.GetProperty("MydSelect");

return (int)field.GetValue(validationContext.ObjectInstance, null) == 0 ? ValidationResult.Success :  new ValidationResult(this.ErrorMessage, new[] { validationContext.MemberName });

}

//机理是通过validationContext获取当前model的所有属性,通过反射获取要验证的字段的值,“MydSelect”是下拉菜单的字段名称

public IEnumerable GetClientValidationRules(ModelMetadata metadata, ControllerContext context)

{

return new[]{

new ModelClientValidationRule{

ValidationType="validatedropdownlist",

ErrorMessage="must be int"//FormatErrorMessage(metadata.DisplayName)//this.ErrorMessage

}

};

}

}

Customdropdownlist标签实现后就可以用来装饰我们需要验证的model对象里的字段。

[Customdropdownlist]

[Required]

[Display(Name = "User name")]

public string UserName { get; set; }

这个个性化实现的标签可以直接扔在viewmodel类里,因为每个model的内的验证规则或许会有细微差别, 随着业务发展,也会出现更多页面出现类似的需求。届时我们可以把它们抽出成一个统一的类。

此时,其实完成了服务端的验证过程,你需要做的就是根据你的需要来实现 ValidationResult IsValid(object value, ValidationContext validationContext)这个函数。

不过要记住要把这个函数的实现用overide 和protected,不然后面报一个很奇怪的错,表示有一个bool IsValid(object value)的函数没有被重写的错误。 原因是虽然都是IsValid,但是之间存在相互调用的关系。 因此如果被声明成public,就会报错。

以上都是model.cs文件中关于model的服务端验证代码。

要想真正实现客户端验证,还需要在你的.cshtml文件中注册相应的JS脚本。

jQuery.validator.unobtrusive.adapters.add("validatedropdownlist", function (options) {

options.rules["validatedropdownlist"] = true;

if (options.message) {

options.messages["validatedropdownlist"] = options.message;

}

});

jQuery.validator.addMethod("validatedropdownlist", function (value) {

if (($(‘#dropdownlist‘).val() == 0)) return true

});

网上有人说validator适配器上方法名validatedropdownlist一定要全小写, 我没试过,但至少全小写是可以work.于是不想浪费时间地全部小写了。

其中$((‘#dropdownlist‘))是dropdownlist在运行后页面中下拉框的名字, 我们其实可以把这个名字作为参数传到页面中,这里只是偷了个懒,请不要在意这些细节 。

最后,不要忘了在web.config中打开客户端验证

<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

这里还有篇外国人写的很不错的过程, 可以用来参考和扩展功能。

http://anthonyvscode.com/2011/07/14/mvc-3-requiredif-validator-for-multiple-values/

时间: 2024-10-12 14:37:18

如何在.net/MVC4中自定义页面验证的前端脚本的相关文章

如何在logback.xml中自定义动态属性

原文地址:http://blog.jboost.cn/trick-logback-prop.html 当使用logback来记录Web应用的日志时,我们通过在logback.xml中配置appender来指定日志输出格式及输出文件路径,这在一台主机或一个文件系统上部署单个实例没有问题,但是如果部署多个实例(比如通过容器的方式),多个实例同时往同一文件写日志可能就会引起问题.这时可以将每个实例的日志文件加以区分,如IP或UUID,或两者结合的形式.这其实就涉及如何在logback.xml中自定义动

ASP.NET 登录中Cookies和验证和前端Jquery

1.登陆中的验证问题 登录中用户名和密码的判断,一是怎么判断,需要调用业务逻辑层的判断方法,这里是单独拿出一个层Controls来进行授权和登录的验证.那怎么进行验证结果的返回,正确进入下个页面错误返回登录页面,首先想到的放法写一个bool的方法,正确进入下一个页面,错误返回登录页面.这里用的一个比较专业的方法是在Controls设置一个数据返回接口类DataResult.cs里面定义好code,Message,Data分别用于进行登录验证,错误信息返回,数据返回(这里暂时用不到)至于为什么这样

asp.net mvc4中自定义404页面

原文地址:http://www.chuchur.com/asp-net-mvc4-404/ 定义404 方法当然有很多种.不同的方法所展现的形式也不一样,用户所体验也不一样.以下提供2两种 方法一: 1. 在web.config 中找到节点<system.web>中启用404配置 <customErrors defaultRedirect="~/Error" mode="On" redirectMode="ResponseRedirect

如何在Fiddler Script中自定义修改请求参数

-更改RequestHeaders中的内容 //根据host判断 if(oSession.host=="www.baidu.com"){ oSession.RequestHeaders.Remove("User-Agent"); oSession.RequestHeaders.Add("User-Agent","Dalvik/2.1.0 (Linux; U; Android 9.0.1; onePlus666 Build/MOB31K)

在.Net MVC中自定义ValidationAttribute标签对Model中的属性做验证

写一个继承与ValidationAttribute类的自定义的验证方法 MVC中传递数据时,大多数都会用Model承载数据,并且在传到控制器后,对Model进行一系列的验证. 我平时经常使用的判断方法比Low,因为Model都是不同的,也需要返回很多不同的信息,所以我都是把很多条件语句封装成私有方法,放在控制器的最下边,然后使用的时候直接调用. 下图就是我平时使用的代码格式,我把验证方法都写在了这里,很低级请轻喷. 其实在.Net MVC中,已经提供了很好的验证方法,就是在属性上面加Valida

在ASP.NET MVC4中实现同页面增删改查,无弹出框02,增删改查界面设计

在上一篇"在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建"中,已经搭建好了Repository层,本篇就剩下增删改查的界面了......今天的阳光真特么好,写完本篇,好出去在阳光下溜溜狗.散散步什么的,正所谓文武之道一张一弛,走神了,进入正题. 首先是一个View Model,在这里定义验证规则,提交和保存数据的时候还必须和领域模型映射. using System; using System.ComponentModel.DataAnnotat

前台页面验证中需要注意的一个与VARCHAR2(N BYTE)和VARCHAR2(N CHAR)的小细节

1:一个小的测试实例 CREATE TABLE SALES.TEST_ ( TEST_BYTE VARCHAR2(5 BYTE), TEST_CHAR VARCHAR2(5 CHAR) )--TABLE CREATED INSERT INTO TEST_ (TEST_CHAR) VALUES('12345')--1 ROW INSERTED INSERT INTO TEST_ (TEST_BYTE) VALUES('12345')--1 ROW INSERTED INSERT INTO TEST

Struts2系列:(21)在Struts中自定义验证规则

1.Struts实现验证的过程 通过对Struts源代码的学习,总结一下Struts如何实现验证. 在struts-default.xml文件中,有validator和workflow两个拦截器. <interceptor name="validation" class="org.apache.struts2.interceptor.validation.AnnotationValidationInterceptor"/> <interceptor

如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[About Layout Pages] 很多网站有些内容需要显示在各个页面中,比如Header,Footer或者告诉用户已经登录的部分.ASP.NET允许你创建一个单独的文件来包含文本.标签和代码的内容块,从而搭建一个风格整齐的网站.接下来你就可以将这个内容块插入到任何你想要让它展示的页面中.采用这种方法