前端記錄代碼1

時間 2019-11-05

標籤前端記錄代碼简体版

原文原文鏈接

一、頁面返回javascript

<a class="retrun-btn" id="returnclick" href="">返回&gt;</a>

對應的javascript爲：css

$(function(){
$("#returnclick").click(function(){	
	   history.back(-1);
	})
})

或者直接html

<input type="button" name="" onclick="javascript:history.back(-1);"  value="返回">

二、表單驗證(jquery用的是本地的，驗證正確和錯誤的圖片也是本地的，重點是功能吧)java

<html>
<head>
<style>
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
    background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
    padding-left:25px;
}
.onSuccess{
    background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
    padding-left:25px;
}
.high{
    color:red;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表單驗證</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--   引入jQuery -->
<script src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">

$(function(){
        //若是是必填的，則加紅星標識.
        $("form :input.required").each(function(){
            var $required = $("<strong class='high'> *</strong>"); //建立元素
            $(this).parent().append($required); //而後將它追加到文檔中
        });
         //文本框失去焦點後
        $('form :input').blur(function(){
             var $parent = $(this).parent();
        //此處的順序不能夠放到if判斷以後
             $parent.find(".formtips").remove();
             //驗證用戶名
             if( $(this).is('#username') ){
                    if( this.value=="" || this.value.length < 6 ){
                        var errorMsg = '請輸入至少6位的用戶名.';
                        $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
                    }else{
                        var okMsg = '輸入正確.';
                        $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                    }
             }
             //驗證郵件
             if( $(this).is('#email') ){
                if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
                      var errorMsg = '請輸入正確的E-Mail地址.';
                      $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
                }else{
                      var okMsg = '輸入正確.';
                      $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                }
             }
        }).keyup(function(){
           $(this).triggerHandler("blur");
        }).focus(function(){
             $(this).triggerHandler("blur");
        });

        
        //提交，最終驗證。
         $('#send').click(function(){
                $("form :input.required").trigger('blur');
                var numError = $('form .onError').length;
                if(numError){
                    return false;
                } 
                alert("註冊成功,密碼已發到你的郵箱,請查收.");
         });

        //重置
         $('#res').click(function(){
                $(".formtips").remove(); 
         });
})

</script>
</head>
<body>

<form method="post" action="">
    <div class="int">
        <label for="username">用戶名:</label>
        <input type="text" id="username" class="required" />
    </div>
    <div class="int">
        <label for="email">郵箱:</label>
        <input type="text" id="email" class="required" />
    </div>
    <div class="int">
        <label for="personinfo">我的資料:</label>
        <input type="text" id="personinfo" />
    </div>
    <div class="sub">
        <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
    </div>
</form>

</body>
</html>

三、郵箱，時間域名自動補全jquery

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery自動完成插件：completer</title>
<link rel="stylesheet" type="text/css" href="completer.css">

<style type="text/css">
.demo{width:360px;margin:50px auto 10px auto;padding:10px;}
.demo p{line-height:30px}
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script src="completer.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#auto-complete-email").completer({
        separator: "@",
        source: ["163.com", "qq.com", "126.com", "139.com", "gmail.com", "hotmail.com", "icloud.com"]
    });
    $("#auto-complete-time").completer({
        filter: function(val) {
            val = val.replace(/\D/g, "").substr(0, 2);

            if (val) {
                val = parseInt(val, 10) || 0;
                val = val > 23 ? 23 : val < 10 ? "0" + val : val;
            }

            return val;
        },
        separator: ":",
        source: ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"]
    });
    
    var $autoCompleteDomain = $("#auto-complete-domain"),
    $autoCompleteGo = $("#auto-complete-go");

    $autoCompleteDomain.completer({
        complete: function() {
            var url = "http://www." + $autoCompleteDomain.val();

            $autoCompleteGo.attr("href", url);
        },
        separator: ".",
        source: ["com", "net", "org", "co", "io", "me", "cn", "com.cn"]
    });

});
</script>
</head>

<body>

<div id="main">

    <div class="demo">
        <p>一、輸入郵箱號：</p>
        <input type="text" id="auto-complete-email" class="form-control" placeholder="E-mail">
        <p>&nbsp;</p>
        <p>二、輸入時間：</p>
        <input type="text" id="auto-complete-time" class="form-control">
        <p>&nbsp;</p>
        <p>三、輸入域名：</p>
        <div class="input-group">
            <span class="input-group-addon">www.</span> 
            <input id="auto-complete-domain" class="form-control" type="text" placeholder="請輸入域名" autocomplete="off" style="z-index:0"> <span class="input-group-btn"><a id="auto-complete-go" class="btn btn-default" href="javascript:void(0);">Go!</a></span>
        </div>        
    </div>
</div>


</body>
</html>

上面的completer.cssweb

.completer-container {
  position: absolute;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: normal;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-bottom-color: #39f;
}
.completer-container li {
  padding: .5em .8em;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
.completer-container .completer-selected,
.completer-container li:hover {
  margin-left: -1px;
  background-color: #eee;
  border-left: 1px solid #39f;
}

completer.jsapp

尼瑪字符超過限制dom

有興趣的能夠看哈，
post

http://pan.baidu.com/s/1o7x37QU
ui