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


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 相关文章推荐
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
js读写json文件实例代码
Oct 21 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
利用express启动一个server服务的方法
Sep 17 Javascript
vue axios请求拦截实例代码
Mar 29 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 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编程语言开发动态WAP页面
2006/10/09 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
php中的观察者模式简单实例
2015/01/20 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
基于Python代码编辑器的选用(详解)
2017/09/13 Python
python实现SOM算法
2018/02/23 Python
python 对象和json互相转换方法
2018/03/22 Python
django初始化数据库的实例
2018/05/27 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
餐饮业会计岗位职责
2013/12/19 职场文书
旅游管理专业个人求职信范文
2013/12/24 职场文书
市场营销工作计划书
2014/05/06 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
职工小家建设活动方案
2014/08/25 职场文书
学校师德师风整改措施
2014/10/27 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
如何写好竞聘报告
2019/04/03 职场文书