easyui textbox validatebox 默认显示tip提示

easyui验证是不显示tip提示的,验证不通过时只将输入框变红,要触发一个mouse(鼠标放上去)的事件才会显示tip。

现在想要验证不通过时直接显示提示,给用户更加直观的错误提示。

找到源代码中验证的方法(jquery.easyui.min.js 版本1.7.0):

function _54b(_54c){
var _54d=$.data(_54c,"validatebox");
var opts=_54d.options;
var box=$(_54c);
opts.onBeforeValidate.call(_54c);
var _54e=_54f();
_54e?box.removeClass("validatebox-invalid"):box.addClass("validatebox-invalid");
opts.err(_54c,_54d.message);
opts.onValidate.call(_54c,_54e);
return _54e;
function _550(msg){
_54d.message=msg;
};

修改后:

function _54b(_54c){
var _54d=$.data(_54c,"validatebox");
var opts=_54d.options;
var box=$(_54c);
opts.onBeforeValidate.call(_54c);
var _54e=_54f();
_54e?box.removeClass("validatebox-invalid"):box.addClass("validatebox-invalid");
opts.err(_54c,_54d.message,"show");
opts.onValidate.call(_54c,_54e);
return _54e;
function _550(msg){
_54d.message=msg;
};

修改后提交表单验证效果:

原文地址:https://www.cnblogs.com/cwr-toki/p/11131019.html

时间: 2024-10-28 05:38:35

easyui textbox validatebox 默认显示tip提示的相关文章

Jquery easyui的validatebox控件和正则表达式

Validatebox是EasyUI的验证控件,它支持很多验证,比如说是否是email.是否是url等,保证我们输入的数据在进行处理前能够确保其完整性和正确性.验证可以实现在数据层和业务规则层,但应当在表现层进行前端的"保护",因此,我们通常在UI层为用户提供友好的.可以交互的验证体验,避免在应用程序中进行不必要的网络间的往返验证.在前期ASP.NET中,我们接触了六种验证控件,根据这六种验证控件,几乎能够实现所有的验证.那现在说的Validatebox是怎么实现验证的呢? 仔细观察j

[js开源组件开发]tip提示组件

tip提示组件 常见的应用场景中,总是难免会遇到提示信息,比如显示不完全时需要鼠标移上去显示title,比如验证时的错误提示,比如操作按钮的辅助说明等,所以我独立出来了一个小的js组件,tip提示组件.效果如下图所示: 大概就是这样了,不复杂的东西,也很实用. 它的DEMO实例请点击这里http://lovewebgames.com/jsmodule/tip.html 它的源码托管在github 请点击这里https://github.com/tianxiangbing/tip <table s

Winform给TextBox设置默认值(获取焦点后默认值消失)

主要是通过TextBox的获取焦点Enter和失去焦点Leave两个事件来实现的, 思路如下: 1.设置一个字符串常量,作为TextBox的默认值: 2.在界面的构造方法中将默认值赋值给TextBox,并设置TextBox的ForeColor为灰色: 3.编写获取焦点事件 TextBox_Enter(object sender, EventArgs e) ,判断TextBox的Text是否等于默认值, 是:则将TextBox内容清空,并将前景色ForeColor改成正常的颜色 4.失去焦点事件

EasyUI中datagrid实现显示、增加、 删除、 修改、 查询操作(后台代码C#)

2datagrid加载数据.代码如下所示 一.数据的显示 1新建HtmlPage2.html页面,引入相关文件.如下所示 <script src="easyui/js/jquery-1.8.2.min.js"></script>  <script src="easyui/js/jquery.easyui.min.js"></script>  <link href="easyui/css/themes/d

发掘ListBox的潜力(三):显示即时提示(Tips)

ListBox显示即时提示(Tips) Listbox内容太长时超出Listbox宽度的部分将无法显示,一种解决方法是让Listbox产生横向滚动条,滚动显示内容(见前面的<发掘ListBox的潜力(一):自动调整横向滚动条宽度 >),另一种方法是让Listbox以Tips的方法显示完整内容.本文要实现的是后一种方式. Tips其实是一个特殊的窗体,类名为:tooltips_class32(在Commctrl(D6)有定义),可使用CreateWindow函数创建:Windows定义了一组以T

MFC 文档view视图中根据鼠标指定的某个区域控制延迟显示tip的方法(原创)

前言 在处理文档视图中,有时候需要根据鼠标指定的位置显示相应的提示信息,对于软件功能优化设计,此功能很有必要. 一. 一般处理方法 ToolTip是Win32中一个通用控件,MFC中为其生成了一个类CToolTipCtrl,总的说来其使用方法是较简单的,下面讲一下它的一般用法和高级用法.一般用法步骤: 1.添加CToolTipCtrl成员变量 m_ToolTip. 2.在父窗口中调用EnableToolTips(TRUE); 3.在窗口的OnCreate(或者其他适当的位置)中向ToolTip中

Android Studio移动鼠标显示悬浮提示的设置方法

欢迎和大家交流技术相关问题: 邮箱: [email protected] 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://github.com/jiangxincode 知乎地址: https://www.zhihu.com/people/jiangxinnju 以Windows 10 + Android Studio 3.0.1为例 默认情况下,在Android Studio中将鼠标移动到函数位置处无法显示悬浮提示,需要进

WPF DatePicker默认显示当前日期,格式化为年月日(转)

WPF DatePicker默认显示当前日期,格式化为年月日 2018年08月08日 11:23:00 weixin_33922670 阅读数:253 原文:WPF DatePicker默认显示当前日期 WPF的日历选择控件默认为当前日期,共有两种方法,一种静态,一种动态. 静态的当然写在DatePicker控件的属性里了,动态的写在对应的cs文件里,具体请看下面. 1.方法一: myDatePicker.Text = DateTime.Today.ToLongDateString(); 2.方

iOS不得姐项目--图片帖子模块,大图默认显示最顶部分的处理

一.刚开始的处理,设置Mode属性(self.pictureImageView.contentMode = UIViewContentModeScaleAspectFill;) 和 Clip Subviews 只能显示图片的中间部分.如图: 下图为图片的开头:cell中应该是默认显示红框中的内容 解决方法:利用绘图,将图片绘制上去 最终效果图: