分享纯手写漂亮的表单验证


Posted in Javascript onNovember 19, 2015

哈哈 手工馒头好吃,今天小编跟大家分享手工js表单验证代码,感兴趣的朋友快来吧。

因为是自定义样式,所以兼容所有浏览器版本,个人认为非常漂亮:网址wuxi.rongzi.com

css

<style>
     /*tooltip*//* CSS属性顺序按照 字母首字母 排列*/
 .ui-slider-tooltip{  background:#fa;   border:px solid #fa;  color:#fff;  display: block;  text-align: left;  padding: px px px px;  position: absolute;  z-index:; }
 .ui-corner-all {  border-radius: px;  -moz-border-radius-bottomleft:px;  -moz-border-radius-bottomright:px;  -moz-border-radius-topleft:px;  -moz-border-radius-topright:px;  -webkit-border-top-left-radius:px px;  -webkit-border-top-right-radius:px px;-webkit-border-bottom-right-radius:px px;  -webkit-border-bottom-left-radius:px px;}
 .ui-tooltip-pointer-down {  border-bottom-width: ;  border-left: px dashed transparent;   border-right: px dashed transparent;  border-top: px solid #fa;  bottom:  -px;  display: block;  height:;  left: %;  margin-left: -px;  position: absolute;   width:;}
 .ui-tooltip-pointer-down-inner {  border-left: px dashed transparent;   border-right: px dashed transparent;  border-top: px solid #fa;  left: -px;  top: -px;  position: absolute; }
 .tip{  font-size:pt;  line-height:px;}
  .error{ border: px solid rgb(, , );}
   </style>

前台:

<input type="text" id="userName"/>
 <input type="submit" onclick="submitOneClickApply()"/>

js:

function submitOneClickApply() {
     var username = $("#userName").val();
     if (username == "" || username == "请输入您的姓名") {
       $("#userName").rzAlertTips({ flagInfo: '请输入联系人', isAnimate: true });
     }

调用的js:

<script type="text/javascript">
   (function ($) {
     jQuery.fn.extend({
       rzAlertTips: function (settings) {
         $(this).each(function () {
           //初始化配置信息
           var options = jQuery.extend({
             flagCss: "tip",
             flagWidth: $(this).outerWidth(),
             flagInfo: $(this).attr("title"),
             isAnimate: false
           },
     settings);
           if (!options.flagInfo) {
             return;
           }
           $(this).removeAttr("title");
           var obj = $(this);
           var oToolTip = null;
           var fun_show = function () {
             //设置提示信息最小宽度为
             options.flagWidth = "auto"; // (parseInt(options.flagWidth) < ) ? : parseInt(options.flagWidth);+ "px"
             var oTip = $("<div class='ui-slider-tooltip ui-corner-all' id='tipWrap_" + $(this).attr("id") + "'></div>");
             var oPointer = $("<div class='ui-tooltip-pointer-down'><div class='ui-tooltip-pointer-down-inner'></div></div>");
             var oTipInfo = $("<div>" + options.flagInfo + "</div>").attr("class", options.flagCss).css("width", options.flagWidth);
             //合并提示信息
             oToolTip = $(oTip).append(oTipInfo).append(oPointer);
             if ($("#tipWrap_" + $(this).attr("id")).length > ) $("#tipWrap_" + $(this).attr("id")).remove();
             //添加淡入效果
             if (options.isAnimate) {
               $(oToolTip).fadeIn("slow");
             }
             $(obj).after(oToolTip);
             //计算提示信息的top、left和width  //position.top 
             var position = $(obj).position();
             var oTipTop = eval(position.top - $(oTip).outerHeight() - );
             var oTipLeft = position.left;
             $(oToolTip).css("top", oTipTop + "px").css("left", oTipLeft + "px");
           };
           fun_show();
           $('.error').removeClass('error');
           $(this).addClass("error");
           setTimeout(function () { $(oToolTip).remove(); }, );
         });
         return this;
       } 
   })(jQuery);
 </script>

以上内容就是小编给大家分享的纯手写漂亮的表单验证,希望大家喜欢。

Javascript 相关文章推荐
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 Javascript
require.js的用法详解
Oct 20 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
angular-tree-component的使用详解
Jul 30 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
如何使用原生Js实现随机点名详解
Jan 06 Javascript
javascript获取系统当前时间的方法
Nov 19 #Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 #Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 #Javascript
跟我学习javascript的Date对象
Nov 19 #Javascript
跟我学习javascript的this关键字
May 28 #Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 #Javascript
基于Jquery代码实现手风琴菜单
Nov 19 #Javascript
You might like
php 动态添加记录
2009/03/10 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
js实现登录验证码
2016/12/22 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
python字符串连接的N种方式总结
2014/09/17 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
python 默认参数相关知识详解
2019/09/18 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
python实现文法左递归的消除方法
2020/05/22 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
是否有自动比较结构的方法
2015/06/03 面试题
文科生自我鉴定
2014/02/15 职场文书
亮化工程实施方案
2014/03/17 职场文书
实习生工作证明范本
2014/09/14 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
工作经验交流材料
2014/12/30 职场文书
Python Django项目和应用的创建详解
2021/11/27 Python