深入剖析ExtJS 2.2实现及应用连载(9):表单验证及提交

2.3.4表单验证

深入剖析ExtJS 2.2实现及应用连载  版权所有，谢绝转载  作者：彭仁夔 QQ：546711211

对于表单来讲，验证总是很重要的一部分，验证可以分成两种类型，一种是客户端验证，一种服务器端。一般都会结合这二种验证来应用，先在客户端通过Js来验证一些和业务无关的格式，如长度等，之后再在服务器端进行验证和业务相关的，如在数据库中没有找到该用户名。

对于我们的办公系统来讲，其登录帐号一般都是取名字的拼音的首字母，如果有重复的，重复的人就可能就会取两个字母，如刘婷，可以用lt或者采用liut。也就是说登录帐号在2位到6位字母之间，只能是字母。密码则不能少于4位。

首先我们在代码2.4的③处前defaults配置项改成如下代码：

defaults : {

    border : false,

    allowBlank : false, blankText : '该字段不允许为空', msgTarget : 'side',

    },

这个是登录帐号和密码组件都共有配置项，allowBlank说明两者都不能为空，如果为空的话，就显示blankText中指定的内容：该字段不允许为空。这些验证没有通过的信息在什么地方显示呢？msgTarget指明了在组件的右边显示。这种显示方式只是显示一个红色的出错小图标，当鼠标放在上面它会提示出错信息。

登录帐号、登录密码组件还要分别进行它们独立的格式判断，在登录帐号的组件中，我们加上下面的配置项：

regex:/^[a-zA-Z]{2,6}$/,regexText:'只能为两到六位的大小写字母。'

在登录密码组件中加上如下的配置项：

regex:/^.{4,}$/,   regexText:'长度不能少于4位'

这样我们就可以实现上面要求的验证。每个文本框组件都有regex配置项，它是用来指明验证的正则表达式，regexText则是指定该正则表达式没有通过时，提示什么样的验证出错信息。如下图所示：

            图2.3 客户端验证

当客户端验证通过时，我们把用户名和密码传到服务器，服务器也要进行相关的验证，如没有找到用户名，则提示改用户不存在，如果找到用户名，密码错误则提示密码不正确。那么客户端又是如何获得这些信息呢？又如何显示出来呢？

这个时候服务器返回的信息是要遵循一定的格式，默认的情况是如下形式的json：

{success:false,errors:[{id:’user’,msg:’该用户不存在’},{id:’pass’,msg:’密码不对’}]

success是用来指定返回是否成功的标识，为false表时出错。这个时候我们要通过errors列出错误项，每项都应该指定id，这个id与form输入元素的name相对应。而msg则是指定出错的提示。这个提示会如上图一样显示出来。

在login.jsp中进行了用户登录的判断，如果成功就返回它要跳转的页面，如果错误，就返回如上面格式的json字符串。其提示的效果和图2.3相似，只是提示的文字内容变成该用户不存在。其实现的代码在下一节给出。

2.3.5 表单提交

我们已经完成form的布局及验证，现在我们要去提交它。提交form可以采用传统的form提交形式，也可以采用Ajax的提交方式。Ext的form支持两种方式，但其默认是Ajax的提交方式。

在代码2.4中，我们已经给出formPanel的buttons配置项配置了两个按钮，一个是提交按键，一个是复位按钮。仅仅是给出其文字样式，没有给出它们的处理实现。对于提交按钮，它的处理动作是按下它就会把form子元素串成查询字符串并且和请求的url地址组合成请求传到服务器端。

也就是提交处理中，我们必须提示提交到什么地方去，这个和form标签的action属性指定的地址是一回事。而对于form子元素串成查询字符串，这个form组件会根据它内部的子组件而自动串接起来。

当请求成功之后，就要返回主页面的地址，然后跳转到主页面。如果没有成功，就要进行出错提示给用户。而对于复位就比较简单，只要把form中子组件文本框（隐藏框也包含）的内容都恢复到初始值。

按照这样的要求，我们重写formPanel的buttons配置项：

代码清单2.5                                                    login.js中代码

buttons : [ {

text : '登陆',

handler : function() {                                                ①

    form.getForm().submit( {                                           ②

     success : function(f, a) {window.location.href = a.result.url;}, ③

     url : 'login.jsp'     });

             }

}, {

text : '取消',

    handler : function() {form.getForm().reset(); }    ④

}]

每个按钮都有handler配置项用来配置按钮被按下时触发的动作，如①④就是分别用来指定两个按钮各自的处理动作函数。对于复位form的所有的子组件，这个我们调用form的reset方法，这里要注意的是form指定是是formPanel。通过这个formPanel的getForm()函数就可以得到该Form组件。它着一系列的函数用来处理form的提交、复位、出错等。②处就是使用它的submit函数来提交整个form。

对于提交，我们首先要给定请求的地址，这个在submit的参数对象的配置项url中给出处理请求的服务器页面是login.jsp。如果成功，就要跳转到返回的主页面地址上去。成功的处理在success的回调函数中，该函数有两个参数，第一个是当前的form组件，第二是返回的JSON对象。在③处我们通过指定window.location的地址为返回结果集中url实现跳转到主页面。返回结果集中url是在主页面来进行设定的。

讲到这里，读者也许会问，出错了怎么办呢？出错了，我们也可以实现failure的回调函数来进行处理，但是只要我们像上一节讲到定义好了返回的格式，那么form就会自动完成出错的处理并提示出来。

接下来我们就得看一下login.jsp要如何去实现：

代码清单2.6                                                    login.jsp中代码

<%@ page language="java" pageEncoding="UTF-8"%><%        ①

     String name = request.getParameter("user");

     String pwd =  request.getParameter("pass");

     String code = request.getParameter("checkcode");

     String scode = (session.getAttribute("validate_code")).toString();

if("prk".equals(name)&&"123456".equals(pwd)&&scode.equals(code)){

        out.println("{success:true,url:\"main.html\"}");

 }else {

         out.println("{success:false,errors:[");

         if(!"prk".equals(name))

           out.println("{id:\"user\",msg:\"用户名不对\"}");

         if(!"123456".equals(pwd))

            out.println(",{id:\"pass\",msg:\"密码不对\"}");

         if(!scode.equals(code))

            out.println(",{id:\"checkcode\",msg:\"验证码不对\"}");

           

        out.println("]}");

        }

%>

这是jsp的处理代码，不进行详细分析。它是通过request对象获取到请求的查询字符串对，之后把它们分别和业务中数据进行比较，如果通过了，就返回含有主页面地址JSON字符串。如果没有成功就进行判断是那些项没有成功，把其出错的提示和form子组件的名字对应起来形成JSON字符串，传到客户端让form组件进行自动的出错提示处理。

在这里我们采用了prk和23456来作为其测试用户名和密码，在实际应用中我们要从数据库查找看看有没有对应的用户和其密码。对于检验码，只要从session属性validate_code取值进行比较就可以了，有可能有的验证生成的代码保存的检验码不是在属性validate_code。这要根据具体情况来具体进行处理。

在这段代码中，我们要注意是①处<%一样和要前面的都写在第一行，不然的话，在输出流中会生成很多空格导致出错。在运行之前，我们最好还是建一个main.html的页面。这样成功了就不会请求不到指定的页面。

是不是觉得还有点缺陷？在请求的等待过程中，页面不会出现任何的变化，用户很有可能会认为没有在提交，而实际中是正在处理中。对于Ajax的提交方式，我们如何来提示用户正在处理中呢？

通过的处理是通过一个浮动层出现在提交form的上面，并显示相关的提示信息，如正在提交，请稍等...之类的话。在这个层下面的所有都会被一层半透明的灰色给罩成，让用户在提交时不能进行其它的操作。这个功能我们称着遮罩提示。如下图所示：

                     图2.4 遮罩提示

这个如何要自行实现还是有点麻烦的。但是它已经集成在元素的扩展之中。对于form来讲，我们要代码2.5的③之后加上一句：waitMsg : '正在提交，请稍等...'。这个是用来指定要显示的提示信息，如上图中。

光加上这个是不够的，我们还在formPanel的配置对象中加上面如下配置项：waitMsgTarget : true,这个是用来指定有等待提示信息。如果指定其值为元素id，那么就会在指定的元素中显示这个提示信息。我们可以把个配置项加到代码2.4的②处后面。现在就可以看到上图的效果了。

登录页面的实现到此为止就已经实现完成。