百度空间 | 百度首页 
 
查看文章
 
asp.net mvc中实现可配置的前后台表单验证
2008-03-28 17:00

好久没发啥东西了,该发点了

前提: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')"


类别:Dotnet | 添加到搜藏 | 浏览() | 评论 (0)
 
最近读者:
 
网友评论:
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
验证码: 请点击后输入四位验证码,字母不区分大小写
      

     

©2009 Baidu