您的位置:首页 > Web前端 > JavaScript

ExtJS4-数据验证

2016-12-16 12:56 204 查看
例子:

<script type="text/javascript">
<!--在页面加载完成后调用JS代码-->
Ext.onReady(function(){
Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields Validation',
width: 340,
bodyPadding: 5,
renderTo: 'myForm',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%',
//错误提示显示在下方,还可以配置为side、title、none
msgTarget: 'under'
},
items: [{
xtype: 'textfield',
name: 'textfield1',
fieldLabel: '必须输入',
//不允许为空验证
allowBlank: false //1
},{
xtype: 'textfield',
name: 'textfield2',
fieldLabel: '知道两个字符',
//输入的字符长度验证(至少输入2个字符)
minLength: 2 //2
},{
xtype: 'textfield',
name: 'textfield3',
fieldLabel: '最长5个字符',
//输入的字符长度验证(最多输入2个字符)
maxLength: 5 //3
},{
xtype: 'textfield',
name: 'textfield7',
fieldLabel: '正则表达式验证电话号码',
//通过正则表达式验证
regex: /^\d{3}-\d{3}-\d{4}$/, //4
regexText: 'Must be in the format xxx-xxx-xxxx'
},{
xtype: 'textfield',
name: 'textfield4',
fieldLabel: '验证用户输入的是否为email',
//已经定义好的验证,请通过文档查看vtype
vtype: 'email' //5
},{
xtype: 'textfield',
name: 'textfield6',
fieldLabel: '验证用户输入的是否是URL',
vtype: 'url' //8
}]
});
});
</script>


效果图:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  extjs4