/** * 三 表单组件验证 * 表单组件自身有验证功能,一旦出错就会给出提示,并且表单被阻止提交,如果自带的验证功能无法满足您的要求 * ,还支持正则表达式 * Ext.form.Field定义了几个属性用于配置是否启用验证功能:validationEvent指定什么事件触发时进行验证,默认 * 为keyup,如果将该属性设为false,即使有键盘输入也不再验证,validateOnBlur指组件失去焦点后是否验证,默认为 * true,默认情况下,用户在输入数据和失去焦点时都会验证是否合法 * * Ext.form.Field还可以自定义验证未通过的显示效果,invalidClass是验证没有通过时表单组件采用的类选择器 * focusClass是组件获取焦点时采用的类选择器;invalidText是输入并没有通过验证时显示的提示信息。 * * 非空验证 * 如果组件内容必填,可以采用非空验证,配置allowBlank选项为false即可。 * */ /** Ext.onReady(function(){ // Ext.form.Field.prototype.msgTarget = 'side'; Ext.QuickTips.init(); var txtName = new Ext.form.TextField({ name: "txtName", renderTo: Ext.getBody(), fieldLabel: "姓名", width: 200, allowBlank: false, minLength:10 // regex: /^\w{6,}$/, //为了配置invalidText,此处使用正则表达式,即至少要有6个字符 // invalidClass: "myvalid", // focusClass: "myfocus", // validationEvent: false, // validateOnBlur: false, // validationDelay: 2000, // blankText: "请输入姓名" }); }); */ /** * blankText: 是在为空时的提示信息,如果不设置,则ext给出自己的提示 * 长度验证 * minLength: 最小长度,maxLength:最大长度,minLengthText指定没有达到最小长度时的提示信息 * maxLengthText指定超过最大长度时的提示信息, 不指定就用Ext的默认提示信息 */ /** * Ext.onReady(function(){ Ext.QuickTips.init(); var txtPassword = new Ext.form.TextField({ name: "txtPassword", renderTo: Ext.getBody(), fieldLabel: "密码", inputType: "password", minLength: 6, maxLength: 10, minLengthText: "温馨提示:最小长度必须为6个字符", maxLengthText: "温馨提示: 最大长度只能为10个字符", width: 200 }); });
发表评论
-
ext_GridPanel2_6
2011-08-26 16:31 949var grid = new Ext.grid.GridPa ... -
ext_GridPanel2_5
2011-08-26 16:29 907//准备数据 var data = [ { ... -
ext_GridPanel2_4
2011-08-26 16:27 1450/** * grid.getView().getRows( ... -
ext_GridPanel2_3
2011-08-26 16:25 845//Proxy var proxy = new Ext. ... -
ext_GridPanel2_2
2011-08-26 16:21 904* selectRows(rows, keepExisti ... -
ext_GridPanel2_1
2011-08-26 16:18 954Ext.namespace("com.deng&qu ... -
ext_GridPanel1_4
2011-08-25 18:01 952//Record 定义记录结果 var Human = ... -
ext_GridPanel1_3
2011-08-25 17:59 911Ext.onReady(function(){ //列模型 ... -
ext_GridPanel1_2
2011-08-25 17:57 854//列模型 var cm = new Ext.grid ... -
ext_GridPanel1_1
2011-08-25 11:08 1113Ext.namespace("com.deng&qu ... -
Ext学习_FormPanel布局3
2011-08-01 10:15 1049{ //行3 layout: " ... -
Ext学习_FormPanel布局2
2011-08-01 10:14 1149Ext.onReady(function(){ var f ... -
Ext学习_FormPanel布局1
2011-08-01 10:12 1019Ext.namespace("com.deng&qu ... -
悬停提示与验证4
2011-07-27 15:47 932/** * vtype验证 * vtype验证是一种预 ... -
悬停提示与验证2
2011-07-27 15:45 1278/** * 有时候,悬停提示信息过长,我们愿意换行显示,对 ... -
悬停提示与验证1
2011-07-27 15:42 1212Ext.namespace("com.deng&qu ... -
Ext学习_表单组件6
2011-07-19 12:03 1043var f = new Ext.form.FormPanel ... -
Ext学习_表单组件5
2011-07-19 12:03 973//最高学历 //准备数据 var data = [ ... -
Ext学习_表单组件4
2011-07-19 12:01 515Ext.namespace("com.deng&qu ... -
Ext学习_表单组件3
2011-07-18 15:47 1003/** * 文本区 */ var areaAddre ...
相关推荐
3. 内容动态生成:可以根据表单元素的状态或值动态生成提示内容,比如显示验证规则说明。 4. 自定义样式:可以使用CSS自定义tooltip的外观,使其与网站设计保持一致。 在实际项目中,`jquery-tooltip`这个文件很...
本话题聚焦于"表单验证Tooltip类型的友好提示方式",这是一种优雅地向用户提供反馈的技术,旨在增强交互性和易用性。 Tooltip是一种常见的UI元素,它在鼠标悬停时显示额外的信息或提示,通常用于提供简短的解释或...
气泡提示控件,通常是指一种友好的用户界面元素,当鼠标悬停在某个元素上时,会显示额外的信息或提示。在ASP.NET中,虽然没有内置的气泡提示控件,但可以通过自定义控件或者利用JavaScript库(如jQuery UI的tooltip...
提示功能(Tooltip)是提升用户体验的一种常见方法,它可以在鼠标悬停在某个元素上时显示额外的信息。jQuery提供了简单的API来创建自定义的提示效果。例如,我们可以使用`title`属性来设置默认的提示文本,然后使用`...
3. 鼠标悬停提示:鼠标悬停在输入框时显示提示,适用于对输入格式有特定要求的场景。 4. CSS样式:通过修改输入框样式(如边框颜色、背景色等)来提示用户输入错误。 五、表单验证类.html 这个文件可能是示例代码或...
### 完全CSS编写的鼠标悬停提示效果详解 #### 一、背景介绍 在网页设计与开发过程中,为了提升用户体验以及提供更多的交互性,开发者经常会在网站中加入各种各样的提示信息。其中,鼠标悬停提示(tooltip)是一种...
通过CSS,我们可以定制滑块的大小、形状、颜色,以及验证成功或失败时的样式变化,使其与网站的整体设计保持一致。 压缩包中的"qwe.html"文件是一个HTML演示页面,它展示了滑块验证如何在实际场景中工作。这个页面...
鼠标悬停提示 为了在鼠标悬停时显示提示信息,你可以利用`ToolTipService`。通过设置`ToolTipService.ToolTip`属性,可以在控件上添加一个提示信息,这在用户将鼠标悬停在输入控件上时会显示。 ```xml , Path=...
在这个项目中,TIPS提示与表单验证结合,当用户输入不符合规则时,会显示错误信息,悬浮在对应的输入框旁边。这种特效增强了用户体验,使用户能够快速了解问题所在,无需提交表单后查看错误信息。实现这类特效,...
3. **编写验证逻辑**:在`Validating`事件处理程序中,检查用户输入的数据。如果数据无效,取消事件(防止焦点离开控件)并设置ErrorProvider的错误信息。例如,检查数字范围: ```csharp if (int.TryParse...
如果验证失败,我们可以设置`CancelEventArgs.Cancel`为`true`,阻止控件失去焦点,从而提示用户修正输入。一旦所有验证都通过,`Control_Validated`事件会被触发,表示当前控件的输入是有效的。 首先,我们需要为...
同时,为了实现视觉反馈,需要准备CSS样式来处理不同验证状态下的样式变化,例如,鼠标悬停、聚焦、成功和错误状态。 2. **内置验证规则**: jQuery Validate提供了多种内置的验证规则,如`required`(必填)、`...
【jQuery CSS3提示框按钮过渡效果】是一种网页交互设计技术,它结合了JavaScript库jQuery与CSS3的强大功能,为用户提供了一种动态且吸引人的提示框按钮体验。在网页设计中,这种过渡效果能够提升用户体验,使得用户...
它用于提供额外的信息,当用户将鼠标悬停在某个元素上时,一个小窗口会显示出来,展示与该元素相关的详细描述或提示。在本资源中,你将获得一个已经封装好的悬浮提示框源码,这意味着你可以直接下载并应用到你的项目...
总的来说,这个压缩包提供了一套完整的、基于jQuery和CSS的网页鼠标悬停文字显示解决方案,适用于那些希望在网站上增加交互性和信息提示的开发者。通过学习和修改这些代码,开发者可以提升他们的前端开发技能,同时...
3. **导航菜单**:当鼠标悬停在菜单项上时,显示子菜单,离开时隐藏,增加互动性。 4. **购物车**:用户添加商品到购物车时,实时更新购物车数量,无需跳转页面。 5. **模态框**:在用户触发特定操作时,如删除...
`css`文件夹可能包含了自定义的样式代码,用于定制验证错误时的样式提示,比如红色边框、警告图标等,以及正常状态下和鼠标悬停时的样式。这些样式可以提高表单的可读性和交互性。 `form`文件夹可能包含了HTML表单...
在上述代码中,`Ext.QuickTips.init()`被用来初始化快速提示功能,这样当鼠标悬停在输入框的红色警告区域上时,可以看到相应的错误提示信息。 总的来说,JavaScript表单验证结合正则表达式和VType,可以有效地控制...
为了显示错误提示,代码中使用了`regexText`属性自定义正则表达式验证失败时的提示信息,并通过`Ext.QuickTips.init()`初始化快速提示功能,使得鼠标悬停在红色警告标记上时可以显示提示信息。 总结来说,这个示例...
验证失败时,插件会改变元素的边框颜色为红色,并在鼠标悬停时显示错误信息。这通过CSS类 `.failvalid` 实现,当验证失败时,动态添加该类到对应的元素。 7. **可扩展性**: 该插件设计灵活,可以轻松添加新的...