SRF之数据验证
实现表单输入数据的验证,包括客户端验证和服务器端验证
如何使用
public class User
{
[Required(ErrorMessage = "请输入姓名")]
public string Name { get; set; }
}
服务器端:
[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", "");
}
}
最新文章
- MongoDB-常见问题
- MySQL的insert语句的区别
- etcd api 接口
- Parallel 试验
- 初识zookeeper(二)之与Dubbo-admin关联
- ";互联网思维";背后的谎言
- OpenCV的基本数据结构
- HDU2819Swap(二分图最大匹配)
- [转载]如何重装Grub,使其可以引导双系统
- CocoaPods简单使用
- android编程——百度地图初探
- 浙大pat 1011题解
- oracle 12c ORA-01017:invalid username/password; logon denied
- js_倒计时去执行函数或则跳转页面
- 学JS的心路历程 -函式(三)this
- CentOS7安装openjdk、tomcat和mysql流程介绍
- 物联网将在2018年实现大规模发展--IBM的四大预测
- windows下WAMP php5.x redis扩展
- idea 自动导入包设置
- UWP 应用程序名称本地化以及商店显示名称本地化
热门文章
- 安装 chardet ,出现ImportError: No module named setuptools
- Unity原生渲染方案
- Effective Modern C++翻译(7)-条款6:当auto推导出意外的类型时,使用显式的类型初始化语义
- js数据结构与算法存储结构
- onclicklistener到底怎么用?
- Bootstrap <;第一篇>;
- swat主流域文件(file.cio)参数详解——引自http://blog.sciencenet.cn/blog-922140-710636.html
- SQL Server 数据库基础编程
- SpringMVC序列化Long转成String
- MyBatis学习系列二——增删改查