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


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 相关文章推荐
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
js实现进度条的方法
Feb 13 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
理解javascript正则表达式
Mar 08 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
详解vue项目打包步骤
Mar 29 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
JavaScript实现音乐播放器
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生成静态页的实现方法
2013/05/10 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
javascript格式化json显示实例分析
2015/04/21 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
Python对象属性自动更新操作示例
2018/06/15 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
linux面试相关问题
2012/08/11 面试题
为什么要使用servlet
2016/01/17 面试题
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
2015年行政部工作总结
2015/04/28 职场文书
mysql sql常用语句大全
2022/06/21 MySQL