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

内容摘要
哈哈 手工馒头好吃，今天小编跟大家分享手工js表单验证代码，感兴趣的朋友快来吧。
因为是自定义样式，所以兼容所有浏览器版本，个人认为非常漂亮：网址wuxi.rongzi.com
css


<styl
文章正文

哈哈 手工馒头好吃，今天小编跟大家分享手工js表单验证代码，感兴趣的朋友快来吧。

因为是自定义样式，所以兼容所有浏览器版本，个人认为非常漂亮：网址wuxi.rongzi.com

css

1
2
3
4
5
6
7
8
9
<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>

前台：

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

js:

1
2
3
4
5
function submitOneClickApply() {
    var username = $("#userName").val();
    if (username == "" || username == "请输入您的姓名") {
      $("#userName").rzAlertTips({ flagInfo: '请输入联系人', isAnimate: true });
    }

调用的js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<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>

以上内容就是小编给大家分享的纯手写漂亮的表单验证，希望大家喜欢。
代码注释
上一篇php有效防止同一用户多次登录下一篇c#开发word批量转pdf源码分享

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！