Ext数据校验

在firefox中，如果校验失败是不会执行提交操作的；但是在IE中则会提交，需要用form.isValid()来判断。

在提交前调用判断是否数据校验OK：

//数据校验

if (!form.getForm().isValid()){

    Ext.Msg.alert('信息','有些必输项未输入！');

    return;

}

 

要想提示，需要把Ext.QuickTips.init();打开，否则看到的就是红色的波浪线，没文字提示。

20.1输入不能为空

继承自Ext.form.TextField的控件都支持非空校验，它们是：TextField、NumberField、TextArea、TriggerField、Combobox、DateField、TimerField。

举例：

var textfield = new Ext.form.TextField({

        fieldLabel:"Username",

        allowBlank:false,

        emptyText:"请输入数据",

        blankText:"此项为必输项！",

        name:"username",

        minLength:6,

        maxLength:16

});

页面加载后输入框中提示“请输入数据”，如果没有输入数据，则在提交时或焦点离开输入框时提示“此项为必输项！”。

 

20.2限制输入长度

代码：

var textfield = new Ext.form.TextField({

        fieldLabel:"Username",

        allowBlank:false,

        emptyText:"请输入数据",

        blankText:"此项为必输项！",

        name:"username",

        minLength:6,

        minLengthText:"最少输入6位！",

        maxLengthText:"最多输入16位！",

        maxLength:16

});

 

20.3借助Vtype验证

Ext提供了一套默认的验证方案，如果使用它们就只需要记住vtype即可，就不需要记住一长串的正则表达式了，然后在控件中配置即可。

例如：

var email = new Ext.form.TextField({

        fieldLabel:"Email",

        allowBlank:false,

        emptyText:"请输入数据",

        name:"email",

        minLength:6,

        maxLength:16,

        vtype:"email"

});

这些信息定义在Ext.form.Vtype中，默认支持4种vtype:

1.  email:电子邮件格式

2.    url：网址

3.    alpha：英文字母

4.    alphanum：英文字母+数字

 

如果要扩展自己的vtype，可以这样：

Ext.apply(Ext.form.VTypes, {

        IPAddress: function(v) {

            return/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);

        },

        IPAddressText: 'Must be a numeric IP address'

    });

这样就扩展了一种vtype:IPAddress。

 

这样使用就可以了：

var ip = new Ext.form.TextField({

        fieldLabel:"Ip",

        allowBlank:false,

        emptyText:"请输入数据",

        name:"ip",

        minLength:6,

        maxLength:16,

        vtype:"IPAddress"

    });

 

20.4自定义校验

其实上面扩展vtype也算是自定义校验规则。自定义校验就是允许使用regex来验证。

例如：

var hanzi = new Ext.form.TextField({

        fieldLabel:"汉字",

        allowBlank:false,

        emptyText:"请输入数据",

        name:"hanzi",

        minLength:6,

        maxLength:16,

        regex:/^[\u4E00-\u9FA5]+$/,

        regexText:"只能输入汉字！"

    });

 

20.5后台校验

在后台返回的消息中，只要返回错误消息errors，并把它放到正确的地方，Ext会自动将错误信息显示到相应的位置。

示例：

// 后台校验

Ext.onReady(function() {

    Ext.QuickTips.init();

   

    var serverText = new Ext.form.TextField({

        fieldLabel:"后台校验",

        name:"houtai"

    });

   

    var form = new Ext.form.FormPanel({

        title:"Ext默认表单提交方式",

        width:800,

        labelAlign:"right",

        labelWidth:100,

        url:'/myExt2.3/AjaxSubmitForm.do',

        renderTo:document.body,

        items:[

               serverText

        ],

        buttons:[

                 {

                 text:"提交",

                 handler:function() {

                         //数据校验

                         if (!form.getForm().isValid()) {

                             Ext.Msg.alert('信息','有些必输项未输入！');

                             return;

                         }

                      

                      form.getForm().submit({

                            success: function(form,action) {

                                Ext.Msg.alert('提示',action.result.msg);

                            },

                            failure: function(form,action) {

                                //Ext.Msg.alert('提示','提交失败！');

                                if (action.failureType == Ext.form.Action.SERVER_INVALID) {// 业务错误

                                    //Ext.Msg.alert('提示','提交失败！');

                                }

                                else { // 网络问题

                                    Ext.Msg.alert('提示','网络连接故障！');

                                }

                            }

                         });

                 }

                 }

        ]

    });

});

 

Servlet：

Stringhoutai = request.getParameter("houtai");

if(houtai.replace("","").length() == 0) {

    response.getWriter().write("{success:false,errors:{houtai:'后台提示不能为空！'}}");

}

else {

    response.getWriter().write("{success:true,msg:'表单提交成功！'}");

}

 

A． 不输入任何内容，单击提交按钮

这里的提示信息就是后台返回的提示信息，在Servlet返回的errors中定义的。

B．  输入内容，单击提交按钮、