弄个箭头是不是会更好?如果只有一层结构,那么箭头只能用背景图实现,但是我又不想用图片,没想到办法~有高人帮忙写一写看看。
- $(form).validate({
- errorElement:'div',
- errorPlacement: function(error, element) {
- error.addClass('tooltip tooltip-inner');
- element.after(error);
- var pos = $.extend({}, element.offset(), {
- width: element.outerWidth()
- , height: element.outerHeight()
- }),
- actualWidth = error.outerWidth(),
- actualHeight = error.outerHeight();
- error.css({display:'block',opacity:'0.8',top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2});
- },
- highlight: function(element, errorClass) {
- //高亮显示
- $(element).addClass(errorClass);
- $(element).parents('li:first').children('label').addClass(errorClass);
- },
- unhighlight:function(element, errorClass){
- $(element).removeClass(errorClass);
- $(element).parents('li:first').children('label').removeClass(errorClass);
- }
- });
- .tooltip {
- position: absolute;
- z-index: 1020;
- display: block;
- visibility: visible;
- padding: 5px;
- font-size: 11px;
- opacity: 0;
- filter: alpha(opacity=0);
- }
- .tooltip-inner {
- max-width: 200px;
- padding: 3px 8px;
- color: #ffffff;
- text-align: center;
- text-decoration: none;
- background-color: #000000;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- }
- form input.error{
- color:#F00;
- border: 1px solid #CE7979;
- background:#FFF7FA;
- }
- form label.error{
- color:#F00;
- }
相关推荐
很好用的页面验证框架,对页面表单数据验证及提示很方便!
jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,还可以自己扩充自己的验证方法,并且对国际化也有很好的支 JQuery.validate.js 在表单验证中经常使用,初学,对于...
类似的文章已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此。最终效果如下: 后端使用Asp.net mvc5,前端框架有:jquery.validate、jquery.validate.unobtrusive、...
jquery校验框架,validate扩展错误提示
Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理...
《jQuery权威指南》除了理论知识丰富而全面外,它还有一个最大的特点就是注重实战,每个知识点都有一个完整的案例,包括需求分析、代码实现和结果展示三个部分,而且还包含两个综合性的案例,它的实践性之强是目前...
4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越...
第一个简单的jQuery程序 jQuery事件的链式写法 控制jQuery对象 jQuery控制CSS样式 第2章 使用JavaScript实现隔行变色 使用jQuery选择器实现隔行变色 JavaScript代码检测页面元素 jQuery代码检测页面元素 ...
在原始库的基础上增加多校验提示框支持。如下: <title>validation test .icon-ok { background: url(./images/icon-ok.png) no-repeat center; width: 16px; height: 16px; display: inline-block; } ....
用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个性化的需求,使得我们用这些插件的默认机制并不能完成这些功能,所以要根据自己的需要去改造它们(毕竟自己还不到那个写一个完美的校验框架的...
jquery插件:一行代码搞定整站表单验证!...2、两种信息提示效果,一个是元素右侧出现提示信息,一个是弹出信息框。另外还附加了$.Showmsg()、$.Hidemsg()全局弹出/关闭信息框方法以便整站有一个统一的信息提示效果
10.1.3 给选择器一个上下文 10.2 处理选择器中的不规范元素标志 10.2.1 选择器中含有特殊符号 10.2.2 选择器中含有空格符号 10.3 优化事件中的冒泡现象 10.4 使用data()方法缓存数据 10.5 解决jquery...
“DRY——避免重复代码”是一个优秀的开发者在开发软件时所具备的最重要的思想之一。我们在开发企业WEB应用程序时都有一些类似的需求,例如:都需要登录页面、用户/角色管理、权限验证、数据有效性验证、多语言/本地...
如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。 2.练习1:验证输入字符长度及非空 <!DOCTYPE html> <html> <...
前端校验有很多现成的组件,比较好用的有 EasyUI 的 validatebox 插件,提示界面做的相当友好,只是validatebox 默认提供的校验规则比较有限,有时我们需要添加自己的校验规则。 rules: { emai
需验证页面引入jquery和插件js、css ... 初始化插件 1 $(document).ready(function() { 2 $("#formID").validationEngine() 3 }) 或者带相关属性: $(document).ready(function() { $("#formID")....
SpaceBuilder\Web\Utility\jquery\plugin\jquery.validate-1.5.5.js 4.修复Email问题 SpaceBuilder.Core/Framework/Configuration/SiteSettings.cs Service/Service/Email/Emails.cs Themes/Manages/Default/...
-一个典型应用,在Window控件中打开新页面,如果传递的参数不正确,则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误!", String.Empty, ExtAspNet.ActiveWindow.GetCloseReference());...
-一个典型应用,在Window控件中打开新页面,如果传递的参数不正确,则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误!", String.Empty, ExtAspNet.ActiveWindow.GetCloseReference());...
SpaceBuilder\Web\Utility\jquery\plugin\jquery.validate-1.5.5.js 4.修复Email问题 SpaceBuilder.Core/Framework/Configuration/SiteSettings.cs Service/Service/Email/Emails.cs Themes/Manages/Default/Pages/...