SRF之数据验证

时间:2022-02-08 16:39:13

实现表单输入数据的验证,包括客户端验证和服务器端验证

如何使用

数据验证在业务层的实体类字段上增加数据验证的特性,例如
    public class User
{
[Required(ErrorMessage = "请输入姓名")]
public string Name { get; set; }
}
常用的数据验证方式
Required:必填
DataTypeValidator: 数据类型验证(url、qq、电话、邮编、身份证、数值等)
StringLength: 字符串长度验证
RegularExpression:自定义正则表达式验证
Range:数值范围验证
Remote:请求服务器端验证
Compare:比较2个输入项是否一致
ClientCustom:自定义js函数验证,自定义函数返回校验是否通过(true/false),函数中用this获得当前校验的html元素,如
服务器端:
[ClientCustom("isnull", ErrorMessage = "Email不能为空")]
public string Email { get; set; }
JS函数:
function isnull() {
  return $(this).val() == "";
}

以上验证方式中DataTypeValidator和ClientCustom是SRF扩展的方式,其它为mvc自带的验证方式,mvc还有更多的验证方式,这里不一一列举。

 

如何实现

1、自定义验证方式
自定义验证要继承System.ComponentModel.DataAnnotations.ValidationAttribute,其中IsValid()函数实现服务器端验证返回验证是否通过,
客户端验证要实现System.Web.Mvc.IClientValidatable接口,
GetClientValidationRules()返回ModelClientValidationRule集合(包含验证类型、参数、错误提示信息)

        public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
{
var rule = new ModelClientValidationRule();
rule.ErrorMessage = base.ErrorMessage;
rule.ValidationParameters["pattern"] = this.pattern;
rule.ValidationType = "regex";
return new[] { rule };
}

在浏览器的html也将生成
 <input data-val="true" data-val-regex="错误提示信息" data-val-regex-pattern="pattern的值" type="text" value="" />
jquery.validate.unobtrusive.js将对根据data-val-regex和data-val-regex-pattern这2个属性做正则表达式的验证

如果要自定义客户端的验证方式,以ClientCustom为例,由于ClientCustom验证方式生成的data-val-custom和data-val-custom-func这中验证方式默认并不支持,所以要在jquery.validate.unobtrusive.js新增adapter,代码如下:

//扩展 zengyy(用自定义函数校验)
adapters.add("custom", ["func"], function (options) {
var value = options.params.func;
setValidationValues(options, "custom", value);
});
//扩展 zengyy(用自定义函数校验)
$jQval.addMethod("custom", function (value, element, params) {
if (params != undefined && params != "") {
var func = window[params];
if (func != undefined && typeof func == "function") {
return func.call(element, element);
} else {
return false;
}
} else {
return true;
}
});

2、验证结果的显示
验证不通过时 mvc3默认是在后边显示提示信息,但这样可能会引起页面布局的改变影响美观,所以改为在输入框的上边以tip的方式显示提示
这种显示方式用到jquery-tipsy这个jQ插件来实现,并修改jquery.validate.unobtrusive.js里边onError()函数的脚本

if (Global && Global.errorShowMode == "tip") { //zengyy:校验错误在上方浮动显示提示 需要用到 jquery.tipsy.cs
if (error.html() != "" && $.isFunction(inputElement.tipsy)) {
inputElement.attr("original-title", error.html());
inputElement.tipsy({ gravity: 's' });
}
else {
inputElement.attr("original-title", "");
}
}