用vtype格式进行简单的验证。
在此举邮件验证的例子,重写上面代码的items配置:
items:[
{fieldLabel:"不能为空",
vtype:"email",//email格式验证
vtypeText:"不是有效的邮箱地址",//错误提示信息,默认值我就不说了
id:"blanktest",
anchor:"90%"
}
你可以修改上面的vtype为以下的几种extjs的vtype默认支持的验证:
//form验证中vtype的默认支持类型
1.alpha //只能输入字母,无法输入其他(如数字,特殊符号等)
2.alphanum//只能输入字母和数字,无法输入其他
3.email//email验证,要求的格式是"langsin@gmail.com"
4.url//url格式验证,要求的格式是http://www.langsin.com
3.确认密码验证(高级自定义验证)
前面的验证都是extjs已经提供的验证,我们也可以自定义验证函数,比上面要复杂点了。我们一起做一个密码确认的例子。
我们修改前面的代码:
//先用Ext.apply方法添加自定义的password验证函数(也可以取其他的名字)
Ext.apply(Ext.form.VTypes,{
password:function(val,field){//val指这里的文本框值,field指这个文本框组件,大家要明白这个意思
if(field.confirmTo){//confirmTo是我们自定义的配置参数,一般用来保存另外的组件的id值
var pwd=Ext.get(field.confirmTo);//取得confirmTo的那个id的值
return (val==pwd.getValue());
}
return true;
}
});
//配置items参数
items:[{fieldLabel:"密码",
id:"pass1",
anchor:"90%"
},{
fieldLabel:"确认密码",
id:"pass2",
vtype:"password",//自定义的验证类型
vtypeText:"两次密码不一致!",
confirmTo:"pass1",//要比较的另外一个的组件的id
anchor:"90%"
}
- 大小: 5.1 KB
分享到:
相关推荐
4. **其他字段**: 除了上述字段外,还有名称、手机号和邮箱等字段,每个字段都有对应的验证规则,比如手机号必须符合特定格式(`vtype:"mphone"`),邮箱必须是有效的邮箱地址(`vtype:"email"`). #### 字段集 字段集...
4.7.3. 借助vtype 4.7.4. 自定义验证规则 4.7.5. 算不上校验的NumberField 4.8. 关于表单内部控件的布局问题 4.8.1. 什么都不做,默认的平铺布局 4.8.2. 分裂,分列 4.8.2.1. 分裂,分列。1.x 4.8.2.2. 分裂,分列。...
Vtype是Ext JS中的验证类型,用于在表单字段输入时进行实时验证。开发者可以定义或使用内置的vtypes,如email、url等,确保用户输入的数据符合预设格式。例如,为一个文本字段设置vtype="email",将自动检查输入...
4.7.3. 借助vtype 4.7.4. 自定义验证规则 4.7.5. 算不上校验的NumberField 4.7.6. 使用后台返回的校验信息 4.8. 关于表单内部控件的布局问题 4.8.1. 什么都不做,默认的平铺布局 4.8.2. 分裂,分列 4.8.3. fieldset...
- `vtype`: 验证类型,如email、url等,用于自动进行数据格式检查。 - `regex`: 正则表达式,自定义验证规则。 - `emptyText`: 输入框默认显示的提示文本,当输入框为空时显示。 3. **事件处理**: TextField...
通过设置`allowBlank`、`blankText`和`regex`等属性,可以在用户离开字段时自动进行验证。 6. **错误提示**: EXTJS提供了丰富的错误提示机制,可以配置错误提示图标、提示文本和位置。对于特殊字符验证失败,可以...
为了显示错误提示,代码中使用了`regexText`属性自定义正则表达式验证失败时的提示信息,并通过`Ext.QuickTips.init()`初始化快速提示功能,使得鼠标悬停在红色警告标记上时可以显示提示信息。 总结来说,这个示例...
首先,ExtJS提供了多种内置的验证方法和组件属性,例如`vtype`和`fieldValidator`,用于在用户提交表单前验证字段内容。`vtype`是预定义的验证类型,如邮箱、数字等,可以简单快速地设置字段的验证规则。例如,对于...
EXTJS提供了多种预定义的`vtype`验证规则,如`email`(验证电子邮件格式)、`url`(验证URL格式)、`number`(验证数字)等。这些验证规则可以应用于`Ext.form.field.Field`的子类,如`Ext.form.TextField`,以确保...
4.2.2 表单验证(VType) 4.2.3 自定义VType验证 4.3 表单的提交和加载 4.3.1 Ext.form.action.Action基础 4.3.2 Ajax模式的表单数据加载 4.3.3 Ajax模式的表单数据提交 4.3.4 标准模式的表单数据提交 4.3.5 ...
- **vtype**: 字符串,自定义验证类型。 - **vtypeText**: 字符串,自定义验证类型失败时显示的提示信息。 - **validator**: 函数,自定义验证逻辑,默认为`null`。 以上配置项可以根据实际应用场景进行灵活调整,...
- `vtype`: 验证类型,如 `alpha`(字母)、`alphanum`(字母数字)、`email`、`url` 等。 - `vtypeText`: 验证失败时的错误提示。 - `validator`: 自定义验证器函数。 - **事件:** - `selectOnFocus`: 获取...
网格中的每一列都绑定了相应的数据字段,实现了数据与视图的自动同步。 ### 示例 3:表单验证 ```javascript var form = Ext.create('Ext.form.Panel', { title: 'Basic Form', width: 300, bodyPadding: 10, ...
总结,EXTJS的时间范围选择自动判断通过自定义验证函数、设置日期选择器属性以及处理按钮事件来实现。这使得用户界面更加友好,有效地防止了无效的日期输入,并提供了实时的反馈。在EXTJS4.1.1版本中,上述代码可以...
- **vtype**:自定义验证类型,例如: - `alpha`:只允许字母。 - `alphanum`:只允许字母和数字。 - `email`:电子邮件地址格式。 - `url`:URL地址格式。 - **vtypeText**:验证失败时显示的消息。 - **...