铁雪资源网 Design By www.gsvan.com

哈哈 手工馒头好吃,今天小编跟大家分享手工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) < ) "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>

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

标签:
表单验证,jquery表单验证,js表单验证

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

评论“分享纯手写漂亮的表单验证”

暂无分享纯手写漂亮的表单验证的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?