返回深入学习ExtJS 2.2开发系列连载教程目录
对于表单来讲，验证总是很重要的一部分，验证可以分成两种类型，一种是客户端验证，一种服务器端。一般都会结合这二种验证来应用，先在客户端通过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则是指定该正则表达式没有通过时，提示什么样的验证出错信息。如下图所示
当客户端验证通过时，我们把用户名和密码传到服务器，服务器也要进行相关的验证，如没有找到用户名，则提示改用户不存在，如果找到用户名，密码错误则提示密码不正确。那么客户端又是如何获得这些信息呢？又如何显示出来呢？
这个时候服务器返回的信息是要遵循一定的格式，默认的情况是如下形式的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配置项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要如何去实现,login.jsp中的代码
这是jsp的处理代码，不进行详细分析。它是通过request对象获取到请求的查询字符串对，之后把它们分别和业务中数据进行比较，如果通过了，就返回含有主页面地址JSON字符串。如果没有成功就进行判断是那些项没有成功，把其出错的提示和form子组件的名字对应起来形成JSON字符串，传到客户端让form组件进行自动的出错提示处理。
在这里我们采用了prk和23456来作为其测试用户名和密码，在实际应用中我们要从数据库查找看看有没有对应的用户和其密码。对于检验码，只要从session属性validate_code取值进行比较就可以了，有可能有的验证生成的代码保存的检验码不是在属性validate_code。这要根据具体情况来具体进行处理。
在这段代码中，我们要注意是①处<%一样和要前面的都写在第一行，不然的话，在输出流中会生成很多空格导致出错。在运行之前，我们最好还是建一个main.html的页面。这样成功了就不会请求不到指定的页面。
是不是觉得还有点缺陷？在请求的等待过程中，页面不会出现任何的变化，用户很有可能会认为没有在提交，而实际中是正在处理中。对于Ajax的提交方式，我们如何来提示用户正在处理中呢？
通过的处理是通过一个浮动层出现在提交form的上面，并显示相关的提示信息，如正在提交，请稍等之类的话。在这个层下面的所有都会被一层半透明的灰色给罩成，让用户在提交时不能进行其它的操作。这个功能我们称着遮罩提示。如下图所示： 
这个如何要自行实现还是有点麻烦的。但是它已经集成在元素的扩展之中。对于form来讲，我们要代码2.5的③之后加上一句：waitMsg : ''正在提交，请稍等''。这个是用来指定要显示的提示信息，如上图中。
光加上这个是不够的，我们还在formPanel的配置对象中加上面如下配置项：waitMsgTarget : true,这个是用来指定有等待提示信息。如果指定其值为元素id，那么就会在指定的元素中显示这个提示信息。我们可以把个配置项加到代码2.4的②处后面。现在就可以看到上图的效果了。
登录页面的实现到此为止就已经实现完成。
