快捷導(dǎo)航

分享純手寫(xiě)漂亮的表單驗(yàn)證

更新時(shí)間：2015年11月19日 09:49:56 作者：我_愛(ài)編程

最近沒(méi)有項(xiàng)目做，閑來(lái)沒(méi)事，于是自己動(dòng)手寫(xiě)了幾個(gè)表單驗(yàn)證，特此分享供大家參考

哈哈手工饅頭好吃，今天小編跟大家分享手工js表單驗(yàn)證代碼，感興趣的朋友快來(lái)吧。

因?yàn)槭亲远x樣式，所以兼容所有瀏覽器版本，個(gè)人認(rèn)為非常漂亮：網(wǎng)址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>

前臺(tái)：

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

js:

 function submitOneClickApply() {
     var username = $("#userName").val();
     if (username == "" || username == "請(qǐng)輸入您的姓名") {
       $("#userName").rzAlertTips({ flagInfo: '請(qǐng)輸入聯(lián)系人', isAnimate: true });
     }

調(diào)用的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 () {
             //設(shè)置提示信息最小寬度為
             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);
             //計(jì)算提示信息的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>

以上內(nèi)容就是小編給大家分享的純手寫(xiě)漂亮的表單驗(yàn)證，希望大家喜歡。

您可能感興趣的文章: