Coolite 表单验证
来源：互联网 发布：mysql视图 编辑：程序博客网 时间：2024/05/19 03:28
一、表单验证
在提交表单时，我们通常需要在客户端做一些验证，通常我们会用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中不可为空的列。
- Coolite 表单验证
- coolite Form表单验证之自定义验证
- Coolite自定义验证,VType
- Coolite
- 验证表单
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 随便说说`
- 中国人必须知道的76个常识。。。看了才发现，自己知道的实在太少了
- typedef的四个用途和两个陷阱
- 【心理学】—为什么相爱的人都不讲理？（越是相爱就越容易吵架）
- 让自己漂亮其实很简单
- Coolite 表单验证
- 背完这999句，你的口语绝对不成问题[[怕以后找不到 赶紧收起来]]
- Python Embedding 开发 - Hello World （二）
- C#由于代码已经过优化或者本机框架位于调用堆栈之上,无法计算表达式的值
- 保护视力 把网页底色变成浅绿色
- 梅宏：闲庭信步软件工程中
- 编程字体推荐
- 医疗保险，公积金、养老、生育、工伤、失业保险
- JAVA正则表达式实例
