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


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控制frame,iframe的src属性代码
Dec 31 Javascript
简单实用的js调试logger组件实现代码
Nov 20 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
AngularJS实现多级下拉框
Mar 25 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做推送服务端实现ios消息推送
2013/07/01 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
事件模型在各浏览器中存在差异
2010/10/20 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
简单的Python2.7编程初学经验总结
2015/04/01 Python
python二分查找算法的递归实现方法
2016/05/12 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
python计算二维矩形IOU实例
2020/01/18 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
基于Python实现天天酷跑功能
2021/01/06 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
struct与class的区别
2014/02/03 面试题
大学生演讲稿范文
2014/01/11 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
股指期货心得体会
2014/09/10 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书