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． 输入内容，单击提交按钮、