好久没发啥东西了,该发点了
前提:vs2008 ,asp.net mvc preview2,jquery
目的:每次进行添加修改操作时,都需要验证表单中各个控件的值,为了更加灵活,需要实现可配置验证信息
演示:http://asp.netmvc.cn 域名够酷?o(∩_∩)o...
用户名密码:testuser:123456 只是提供演示,所以开放了所有权限,希望大家别乱改系统管理的数据,否则我就得还原数据库了
方法简单介绍:使用了比较直接的方式,在数据库中存储各表单对应实体的字段配置信息,在程序运行时读取出来缓存之,在每个表单提交的时候调用一些静态方法来验证Request.Form或者Request.QueryString中传递过来的值,将结果输出,因为前台和后台验证都是必须的,所以将两种的验证过程都放在后台,前台通过ajax调用后台返回json处理
详细步骤:
1.数据库及linq实体设计

2.验证helper及相关类
这个比较简单,无非就是做一些相关的类,将数据库的信息组织起来方便用

3.后台验证
在使用表单的数据之前调用helper验证一下:
通常会放到controller基类中
protected void ValidatorForm(string pEntityName)
{
ValidatorResult vr = ValidatorHelper.ValidatorForm(Request.Form, pEntityName);
if (!vr.Successful)
{
ShowMessage(ValidatorHelper.GetHTMLResult(vr));
}
}
只需要传递实体名即可
4.前台验证
1.准备一个后台的action,比如就放在/Home/ValidatorFormToJSON这里
public void ValidatorFormToJSON(string EntityName)
{
Response.Write(ValidatorHelper.GetJSONResult(Request.QueryString, EntityName));
Response.AppendHeader("Expires", "Mon, 26 Jul 2000 05:00:00 GMT");//防止ie缓存
}
2.js通用代码放在js文件中
function validateForm(btn,formName,entityName){
$(btn).attr("disabled","disabled");
$(".ValidateMessage").remove();
$(".ValidateControl").removeClass("ValidateControl");
$.getJSON("/Home/ValidatorFormToJSON?EntityName="+entityName+"&"+$("#"+formName).serialize(),
function(data){
if(data.Successful==false){
for(i=0;i<data.Items.length;i++){
var item = data.Items[i];
$("*[name='"+item.FieldName+"']").after("<b class='ValidateMessage'><a name='"+item.FieldName+"'/>"+item.Message+"</b>");
$("*[name='"+item.FieldName+"']").addClass("ValidateControl");
$("*[name='"+item.FieldName+"']").focus();
}
$(btn).attr("disabled","");
}
else{
$("#"+formName).submit();
}
});
return false;
}
用jquery可以方便的获得form元素并提交给上边的action,获得json来操作页面元素,报告错误
jquery的 $("#"+formName).serialize() 对它的帮助很大
3.需要验证的form里的submit 按钮的处理加入以下属性
onclick="return validateForm(this,'mEditForm','EntityName')"
其中'mEditForm'是要验证表单的id
5.完成看效果
配置界面:

实际使用界面:

6.总结
使用该方式验证表单时所需进行的操作,顺序部分先后
1.配置验证信息
2.后台要使用request.form之前 调用ValidatorForm("EntityName");
3.前台给form的submit按钮加上如下属性onclick="return validateForm(this,'mEditForm','EntityName')"