一、表单验证
在提交表单时,我们通常需要在客户端做一些验证,通常我们会用if(field.value==''){alert('XXX不能为空');}这样的方式来做,但在Coolite中有一种叫做“验证标记”(就是那红浪线),这对于验证来说变得很方便,下面举例说明:
<ext:Window runat="server" Layout="Fit" AutoHeight="true" Width="400" Frame="true" Title="表单验证示例">
<Items>
<ext:FormPanel runat="server" ID="mainForm" Layout="Form" Frame="true" AutoHeight="true" LabelWidth="60">
<Items>
<ext:TextField ID="InvoiceSn" runat="server" FieldLabel="发票号码" AllowBlank="true" MaxLength="30" Cls="no_cn" MaskRe="/[A-Za-z//d//s]/" EnableKeyEvents="true" AnchorHorizontal="99%">
<Listeners>
<Change Handler="valid(this);" />
<KeyUp Handler="valid(this);" />
</Listeners>
</ext:TextField>
<ext:NumberField ID="UnitPrice" runat="server" FieldLabel="购置单价" AllowBlank="false" MaxLength="12" AllowDecimals="true" DecimalPrecision="2" AnchorHorizontal="99%"></ext:NumberField>
<ext:TextField ID="FirstName" runat="server" FieldLabel="客户姓名" AllowBlank="false" MaxLength="6" Regex="^[//u0391-//uFFE5]+$" AnchorHorizontal="99%"></ext:TextField>
<ext:DateField ID="Birthday" runat="server" FieldLabel="出生日期" AnchorHorizontal="99%">
<Listeners>
<Render Handler="this.setMaxValue(new Date());" />
</Listeners>
</ext:DateField>
<ext:TextField ID="Address" runat="server" FieldLabel="联系地址" AllowBlank="false" MinLength="6" MaxLength="50" AnchorHorizontal="99%"></ext:TextField>
<ext:TextField ID="Phone" runat="server" FieldLabel="联系电话" AllowBlank="false" MinLength="8" Regex="/(//(//d{3,4}//)|//d{3,4}-|//s)?//d{8}[//,]?/" MaskRe="/[0-9//-//,]/" MaxLength="30" Cls="no_cn" EnableKeyEvents="true" AnchorHorizontal="99%"></ext:TextField>
<ext:TextField ID="Mobile" runat="server" FieldLabel="移动电话" MinLength="11" MaxLength="15" Regex="/(86)*0*1//d{10}/" MaskRe="///d/" Cls="no_cn" AnchorHorizontal="99%"></ext:TextField>
<ext:TextField
ID="CardSn"
runat="server"
FieldLabel="身份证号"
AllowBlank="false"
Regex="/^[1-9](//d{7}((0//d)|(1[0-2]))(([0|1|2]//d)|3[0-1])//d{3})|(//d{5}[1-9]//d{3}((0//d)|(1[0-2]))(([0|1|2]//d)|3[0-1])((//d{4})|//d{3}[A-Z]))$/"
RegexText="身份证号码不正确"
MinLength="15"
MaxLength="18" AnchorHorizontal="99%"
Cls="no_cn"
EnableKeyEvents="true">
<Listeners>
<Change Handler="fillData(newValue,#{Birthday},#{Sex});" />
</Listeners>
</ext:TextField>
<ext:ComboBox ID="Sex" runat="server" FieldLabel="性别" AnchorHorizontal="99%">
<Items>
<ext:ListItem Text="男" />
<ext:ListItem Text="女" />
</Items>
<Listeners>
<Render Handler="this.setValue('男');" />
</Listeners>
</ext:ComboBox>
<ext:TextField ID="PostCode" runat="server" FieldLabel="邮编" AllowBlank="false" MinLength="6" MaxLength="6" Cls="no_cn" Regex="/^[1-9]//d{5}/" MaskRe="///d/" EnableKeyEvents="true" AnchorHorizontal="99%"></ext:TextField>
<ext:FileUploadField runat="server" FieldLabel="上传图片" Regex="^.+(//.gif|jpg|png|bmp)$" RegexText="仅支持[gif,jpg,png,bmp]格式的图片" ButtonText="浏览" AnchorHorizontal="99%"></ext:FileUploadField>
</Items>
</ext:FormPanel>
</Items>
<Buttons>
<ext:Button runat="server" Text="保存">
<DirectEvents>
<Click OnEvent="Form_Saved" Before="return checkForm(#{mainForm});" Failure="showError('错误','保存出错');" Success="Ext.Msg.alert('成功','保存成功');" ShowWarningOnFailure="false">
</Click>
</DirectEvents>
</ext:Button>
</Buttons>
</ext:Window>
<****** language="javascript" type="text/javascript">
var checkForm = function(form) {
if (form.form.isValid())
return true;
Ext.Msg.alert('验证失败', '请检查被标记红色浪线的数据是否正确');
return false;
};
</script>
1、常用的验证属*AllowBlank="false"、MinLength="8"、MaxLength="20"意思很明确,不多说了。
2、Regex和MaskRe都是正则表达式验证,不同的是,前者是输入后进行验证,后者是输入时进行验证,但后者的弱点是不验证已输入的数据(如我们复制一个数据进去,它就傻眼了)。
3、我们还可以用事件来防止MaskRe之后的Copy发生,上例中定义了一个valid(field)方法来禁止非法输入。
4、保存前,我们对FormPanel的isValid()方法,对表单作出统一验证,并提示错误情况。
gridpanel验证是件麻烦事,我通常的做法很简单,请看示例:
<****** language="javascript" type="text/javascript">
var checkBlank = function(grid) {
if (check.gridValid(grid, ['SizeName'])) {
return true;
}
return false;
};
var check = {
gridValid: function(grid, fields) {
var rs = grid.store.modified || [];
for (var i = 0; i < rs.length; i++) {
for (var j = 0; j < fields.length; j++) {
if (Ext.isEmpty(rs[i].data[fields[j]])) {
grid.startEditing(this.getRowIndex(grid, rs[i]), this.getColIndex(grid, fields[j]));
return false;
}
}
}
return true;
},
getRowIndex: function(grid, record) {
return grid.store.indexOf(record);
},
getColIndex: function(grid, dataIndex) {
return grid.getColumnModel().findColumnIndex(dataIndex);
}
};
</script>
<ext:Viewport Layout="Fit" runat="server">
<Items>
<ext:GridPanel
ID="gpSize"
runat="server"
Title="Grid验证示例"
TrackMouseOver="true"
StripeRows="true">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button ID="btnSave" runat="server" Text="保存" Icon="Disk">
<Listeners>
<Click Handler="if(checkBlank(#{gpSize})){#{gpSize}.save();}" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel runat="server">
<Columns>
<ext:RowNumbererColumn />
<ext:Column DataIndex="SizeSn" Header="组号" Width="100">
<Editor>
<ext:TextField runat="server" MaxLength="10" Regex="///d{4}/" />
</Editor>
</ext:Column>
<ext:Column DataIndex="SizeName" Header="尺码" Width="200">
<Editor>
<ext:TextField runat="server" MaxLength="10" AllowBlank="false" />
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" />
</SelectionModel>
</ext:GridPanel>
</Items>
</ext:Viewport>
解析:
1、在Grid中的Field设置了 MaxLength="10",Regex="///d{4}/"等,如果输入数据非法,结果不会被改变。换句话讲,非法数据输不进。
2、设置AllowBlank="false"在Grid中无效,怎么办?示例中我们写了个checkBlank(grid)的方法来遍历grid中不可为空的列。