`

悬停提示与验证3

 
阅读更多
/**
 * 三 表单组件验证
 * 表单组件自身有验证功能,一旦出错就会给出提示,并且表单被阻止提交,如果自带的验证功能无法满足您的要求
 * ,还支持正则表达式
 * 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		
	});
});
 
分享到:
评论

相关推荐

    jquery 验证 提示 插件

    3. 内容动态生成:可以根据表单元素的状态或值动态生成提示内容,比如显示验证规则说明。 4. 自定义样式:可以使用CSS自定义tooltip的外观,使其与网站设计保持一致。 在实际项目中,`jquery-tooltip`这个文件很...

    表单验证ToolTip类型的友好提示方式

    本话题聚焦于"表单验证Tooltip类型的友好提示方式",这是一种优雅地向用户提供反馈的技术,旨在增强交互性和易用性。 Tooltip是一种常见的UI元素,它在鼠标悬停时显示额外的信息或提示,通常用于提供简短的解释或...

    商业编程-源码-asp.net验证控件气泡提示控件及Demo源码.zip

    气泡提示控件,通常是指一种友好的用户界面元素,当鼠标悬停在某个元素上时,会显示额外的信息或提示。在ASP.NET中,虽然没有内置的气泡提示控件,但可以通过自定义控件或者利用JavaScript库(如jQuery UI的tooltip...

    如何在asp.net中用jQuery实现便捷的提示功能和表单验证功能

    提示功能(Tooltip)是提升用户体验的一种常见方法,它可以在鼠标悬停在某个元素上时显示额外的信息。jQuery提供了简单的API来创建自定义的提示效果。例如,我们可以使用`title`属性来设置默认的提示文本,然后使用`...

    表单验证js 能够帮助你更好的写表单验证

    3. 鼠标悬停提示:鼠标悬停在输入框时显示提示,适用于对输入格式有特定要求的场景。 4. CSS样式:通过修改输入框样式(如边框颜色、背景色等)来提示用户输入错误。 五、表单验证类.html 这个文件可能是示例代码或...

    完全CSS写的鼠标悬停tip效果

    ### 完全CSS编写的鼠标悬停提示效果详解 #### 一、背景介绍 在网页设计与开发过程中,为了提升用户体验以及提供更多的交互性,开发者经常会在网站中加入各种各样的提示信息。其中,鼠标悬停提示(tooltip)是一种...

    滑块验证 slidervalidation.zip

    通过CSS,我们可以定制滑块的大小、形状、颜色,以及验证成功或失败时的样式变化,使其与网站的整体设计保持一致。 压缩包中的"qwe.html"文件是一个HTML演示页面,它展示了滑块验证如何在实际场景中工作。这个页面...

    WPF 数据验证

    鼠标悬停提示 为了在鼠标悬停时显示提示信息,你可以利用`ToolTipService`。通过设置`ToolTipService.ToolTip`属性,可以在控件上添加一个提示信息,这在用户将鼠标悬停在输入控件上时会显示。 ```xml , Path=...

    jquery实现的会员注册表单验证悬浮TIPS提示特效源码修改版.zip

    在这个项目中,TIPS提示与表单验证结合,当用户输入不符合规则时,会显示错误信息,悬浮在对应的输入框旁边。这种特效增强了用户体验,使用户能够快速了解问题所在,无需提交表单后查看错误信息。实现这类特效,...

    数据验证Demo(WinForm)

    3. **编写验证逻辑**:在`Validating`事件处理程序中,检查用户输入的数据。如果数据无效,取消事件(防止焦点离开控件)并设置ErrorProvider的错误信息。例如,检查数字范围: ```csharp if (int.TryParse...

    Win Form程序中的输入验证控件 ValidateInput

    如果验证失败,我们可以设置`CancelEventArgs.Cancel`为`true`,阻止控件失去焦点,从而提示用户修正输入。一旦所有验证都通过,`Control_Validated`事件会被触发,表示当前控件的输入是有效的。 首先,我们需要为...

    jQuery Validate表单验证插件实现代码

    同时,为了实现视觉反馈,需要准备CSS样式来处理不同验证状态下的样式变化,例如,鼠标悬停、聚焦、成功和错误状态。 2. **内置验证规则**: jQuery Validate提供了多种内置的验证规则,如`required`(必填)、`...

    jQuery CSS3提示框按钮过渡效果.zip

    【jQuery CSS3提示框按钮过渡效果】是一种网页交互设计技术,它结合了JavaScript库jQuery与CSS3的强大功能,为用户提供了一种动态且吸引人的提示框按钮体验。在网页设计中,这种过渡效果能够提升用户体验,使得用户...

    悬浮提示框

    它用于提供额外的信息,当用户将鼠标悬停在某个元素上时,一个小窗口会显示出来,展示与该元素相关的详细描述或提示。在本资源中,你将获得一个已经封装好的悬浮提示框源码,这意味着你可以直接下载并应用到你的项目...

    10款鼠标悬停遮罩显示文字特效.rar

    总的来说,这个压缩包提供了一套完整的、基于jQuery和CSS的网页鼠标悬停文字显示解决方案,适用于那些希望在网站上增加交互性和信息提示的开发者。通过学习和修改这些代码,开发者可以提升他们的前端开发技能,同时...

    JS客户端验证与页面特效制作

    3. **导航菜单**:当鼠标悬停在菜单项上时,显示子菜单,离开时隐藏,增加互动性。 4. **购物车**:用户添加商品到购物车时,实时更新购物车数量,无需跳转页面。 5. **模态框**:在用户触发特定操作时,如删除...

    完善了上次的表单验证

    `css`文件夹可能包含了自定义的样式代码,用于定制验证错误时的样式提示,比如红色边框、警告图标等,以及正常状态下和鼠标悬停时的样式。这些样式可以提高表单的可读性和交互性。 `form`文件夹可能包含了HTML表单...

    JS表单验证数字字母汉字邮箱.docx

    在上述代码中,`Ext.QuickTips.init()`被用来初始化快速提示功能,这样当鼠标悬停在输入框的红色警告区域上时,可以看到相应的错误提示信息。 总的来说,JavaScript表单验证结合正则表达式和VType,可以有效地控制...

    JS表单验证数字字母汉字邮箱.pdf

    为了显示错误提示,代码中使用了`regexText`属性自定义正则表达式验证失败时的提示信息,并通过`Ext.QuickTips.init()`初始化快速提示功能,使得鼠标悬停在红色警告标记上时可以显示提示信息。 总结来说,这个示例...

    拥有一个属于自己的javascript表单验证插件_.docx

    验证失败时,插件会改变元素的边框颜色为红色,并在鼠标悬停时显示错误信息。这通过CSS类 `.failvalid` 实现,当验证失败时,动态添加该类到对应的元素。 7. **可扩展性**: 该插件设计灵活,可以轻松添加新的...

Global site tag (gtag.js) - Google Analytics