Häufig verwendete Formularcodefreigabe in JavaScript (Sammlung)

Mobiltelefon (Textfeld):

<input type="text" name="" maxlength="11" placeholder="" autocomplete="off">

Grundlegende Formularvalidierung

<script>$(function(){
    $(&#39;.fr-form&#39;).submit(function(event){
        event.preventDefault();//阻止表单提交事件        
        $(this).find(&#39;.error-tip&#39;).html(&#39;&#39;);        
        var name = $(&#39;.username&#39;);        
        var mobile = $(&#39;.mobile&#39;);        
        var regTest = /^1[3|4|5|7|8][0-9]{1}[0-9]{8}$|15[0-9]{1}[0-9]{8}$|18[0-9]{1}[0-9]{8}$/;        
        if(!name.val().length || name.val() == name.attr(&#39;data-value&#39;) ){alert(&#39;请填写姓名&#39;);return false;}        
        if(!mobile.val().length || mobile.val() == mobile.attr(&#39;data-value&#39;) ){alert(&#39;请填写电话&#39;);return false;}        
        if(!regTest.test( mobile.val() )){alert(&#39;电话格式不对&#39;);return false;}
        $.ajax({
            url:&#39;/signup&#39;,
            type:&#39;POST&#39;,
            data:&#39;realname=&#39;+name+&#39;&mobile=&#39;+mobile+&#39;&source=39&#39;,
            dataType:&#39;json&#39;,
            success:function(data){                if(data.status == 1){
                    alert(data.msg);
                }else{
                    alert(&#39;提交成功&#39;);
                }
            }
        })        return false;
    });
});
</script>
<form method="post" action="" class="fr-form">
<input type="text" class="input username" data-value="您的称呼" value="">
<input type="text" class="input mobile" data-value="您的电话" value="">
<p class="error-tip"></p><input type="submit" class="frformbtn" value="免费申请">
</form>

Kontrollkästchenwert

<script src=" 
</script>
<script type="text/javascript">$(function(){
    $("#form").submit(function(){//表单提交:复选框取值
        //var checkboxs = $(&#39;input[type="checkbox"]:checked&#39;);
        var checkboxs = $(&#39;input[type="checkbox"][name="test"]:checked&#39;);        
        var checkboxs = $(&#39;input:checkbox[name="test"]:checked&#39;);
        console.log("长度: "+checkboxs.length);
        checkboxs.each(function(){            
        var s=$(this).val();
            console.log(s);
        });
        console.log("------------");        
        var checkboxs=$(&#39;input:checkbox[name="test"]:checked&#39;);        
        for(i=0;i<checkboxs.length;i++){
            console.log( $(checkboxs[i]).val());
        }        return false;
    });
});</script><form method="post" action="" id="form">
    <input type="checkbox" name="test" value="1">
    <input type="checkbox" name="test" value="2">
    <input type="checkbox" name="test" value="3">
    <input type="checkbox" name="test" value="4">
    <input type="checkbox" name="test" value="5">
    <input type="submit">
    <input type="reset"></form>

Radio-Wert (Optionsfeld)

<script src=" 
</script>
<script type="text/javascript">$(function(){
    $("#form").submit(function(){//表单提交：单选框取值
        var aaa=$(&#39;input:radio[name="aaa"]:checked&#39;).val();
        alert(aaa);        
        return false;
    });
});</script><form method="post" action="" id="form">
    <input type="radio" name="aaa" value="1" checked>
    <input type="radio" name="aaa" value="2">
    <input type="radio" name="aaa" value="3">
    <input type="submit"></form>

Kontrollkästchen „Alles auswählen“ (Native js)

<script src=" 
</script>
<script type="text/javascript">$(function(){
    $("#check_all").click(function(){            
    var a=$(this)[0].checked;            
    //alert( typeof a);
            var inputs = document.getElementsByTagName("input");            
            for(var i=0; i< inputs.length; i++){                
            if(inputs[i].type == "checkbox"){
                    inputs[i].checked = a; 
                }
            }
    });
});
</script>
<input type="checkbox" name="" id="check_all">选择所有<hr>
<input type="checkbox" name="">
<br>
<input type="checkbox" name="">
<br>
<input type="checkbox" name="">
<br>
<input type="checkbox" name="">
<br>

Kontrollkästchen Alle auswählen (jquery)

<script type="text/javascript" src=" 
</script>
<script type="text/javascript">$(function(){
    $("#check_all").click(function(){        
    if($(this).is(":checked")){
            $("input[name=aa]").prop("checked", true);
        }else{
            $("input[name=aa]").prop("checked", false);
        }
    });
});
</script>
<input type="checkbox" name="" id="check_all">选择所有<hr>
<input type="checkbox" name="aa">
<br>
<input type="checkbox" name="aa">
<br>
<input type="checkbox" name="aa">
<br>
<input type="checkbox" name="aa">
<br>

Kontrollkästchen Aktivieren Sie das Kontrollkästchen von sich selbst und allen untergeordneten Unterverzeichnissen: .prop("checked",true); 　2015-12-1

<script type="text/javascript" src=" 
</script>
<script type="text/javascript">$(function(){
    $("input[type=checkbox]").click(function(){        
    var s=$(this)[0].checked;
        $(this).parent().find("input[type=checkbox]").prop("checked",s);
    });
});</script><ul>
    <li><input type="checkbox" name="">
        <ul>
            <li><input type="checkbox" name=""></li>
            <li><input type="checkbox" name=""></li>

            <li><input type="checkbox" name="">
                <ul>
                    <li><input type="checkbox" name=""></li>
                    <li><input type="checkbox" name=""></li>
                    <li><input type="checkbox" name=""></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><input type="checkbox" name=""></li>
    <li><input type="checkbox" name="">
        <ul>
            <li><input type="checkbox" name=""></li>
            <li><input type="checkbox" name=""></li>
            <li><input type="checkbox" name=""></li>
        </ul>
    </li></ul>

Ein häufiger Effekt des Textfelds:

Im „Fokus“-Zustand handelt es sich um dunklen Text. Nachdem die Maus wegbewegt wurde, ändert sich der Text in eine helle Farbe.

Wenn das Textfeld nicht ausgefüllt (oder leer) ist, wird eine Eingabeaufforderung angezeigt. Nach dem Ausfüllen wird die Textfarbe dunkler und die Eingabeaufforderung wird entfernt.

<script type="text/javascript" src=" 
</script>
<script type="text/javascript">$(function(){
    $(".input").blur(function(){        
    var _defalut = $(this)[0].defaultValue;        
    var _value = $(this).val();        
    if(_value==_defalut || _value ==""){
            $(this).val(_defalut);
            $(this).removeClass("cGray");
        }else{
            $(this).addClass("cGray");
        }
    });
    $(".user-container .input").focus(function(){        
    var _defalut = $(this)[0].defaultValue;        
    var _value = $(this).val();        
    if(_value==_defalut){
            $(this).val("");
        }
    });
});
</script>
<ul>
<li>
<input type="text" name="" class="input" value="手机号码 （填写手机号）">
</li>
<li>
<input type="text" name="" class="input" value="密码 （6-16位数字、字母）">
</li>
</ul>

textarea:

Mehrzeilige Textfeldformularvalidierung: 2016-5-3

<script type="text/javascript" src=" 
</script>
<script type="text/javascript">$(function(){    
//表单提交（实际是表单不提交，发ajax）    
$(&#39;.questions-form&#39;).submit(function() {
        event.preventDefault();//阻止表单提交事件
        var _textarea = $(&#39;.questions-form&#39;).find(&#39;textarea&#39;);        
        var _str = $.trim(_textarea.val());        
        var _len = _str.replace(/[^\x00-\xff]/g, &#39;__&#39;).length;        
        if (_textarea.attr(&#39;data-value&#39;) == _str) {alert(&#39;请填写内容&#39;);return false;}        
        if (_len < 10) {alert(&#39;内容过短，长度应在10-500个字之间&#39;);return false;}        
        if (_len > 500) {alert(&#39;内容超长了，长度在10-500个字之间，现在已 &#39; + _len + &#39; 个英文字符长度&#39;);return false;}        
        //ajax..
        return false;
    });
});</script>
<form method="post" class="questions-form">
    <textarea name="" rows="6" cols="50"></textarea>
    <input type="submit" value="提交" class=""></form>

Berechnen Sie die Zeichenlänge des Textfelds (1 chinesisches Zeichen zählt als 2 englische Zeichen) 2016-1-15

<script type="text/javascript" src=" 
</script>
<script type="text/javascript">$(function(){
    $("#textarea").blur(function(){        
    var strLen = $(this).val().replace(/[^\x00-\xff]/g,&#39;__&#39;).length;
        alert(strLen);
    });
});</script>
<textarea id="textarea" rows="5" cols="66">
</textarea>

Beschränken Sie das Textfeld so, dass nur Zahlen eingegeben werden können: 　　　2016-6-6

<script type="text/javascript" src=" 
</script>
<script type="text/javascript">$(function(){    
//房屋结构: 室、厅、卫、厨房、阳台(限制只允许输入数字)    
$(".ipt2").keyup(function(){        
var _val = $(this).val();        
//var _val = _val.replace(/[^\-?\d.]/g,&#39;&#39;)    
//限制文本框只能输入正数，负数，小数
        //var _val = _val.replace(/[^\d.]/g,&#39;&#39;)    
         //限制文本框只能输入正数，小数
        var _val = _val.replace(/\D/g,&#39;&#39;)    　　  
        //限制文本框只能输入数字        
        $(this).val(_val);
    });
    </script>
    <input type="text" name="shi" value="2" autocomplete="off" maxlength="10" class="ipt2">

Dropdown-Feld :

<select>
  <optgroup label="Sirs">
    <option value ="aaa">aaa</option>
    <option value ="bbb">bbb</option>
  </optgroup>

  <optgroup label="Cars">
    <option value ="xxx">xxx</option>
    <option value ="yyy">yyy</option>
  </optgroup></select>

Textfeld (Dropdown-Eingabeaufforderung):

<input id="myCar" list="cars" /><datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo"></datalist>

Textfeld (doppelklicken, um den Wert des Platzhalters auf den aktuellen Wert festzulegen)

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script type="text/javascript">$(function(){
    $("input[type=text]").dblclick(function(){    /*双击后将placeholder的值设为当前值*/
        if( $(this).val().length==0){
            $(this).val($(this).attr(&#39;placeholder&#39;));
        }
    });
});</script><input type="text" value="" placeholder="hidden">

---

Bestätigen:

<script type="text/javascript">$(function(){
    $("#list_form").submit(function(){//表单提交:
        if ( confirm("确定删除已选中的信息吗？") ){            
        return true;
        }else{            return false;
        }
    });
});</script>

Serialisierter Formwert: 　2016-4 -13

<script type="text/javascript">$(function(){
    $("form").submit(function(){
        event.preventDefault();//阻止表单提交事件
        var s=$(&#39;form&#39;).serialize();//序列化表单值        alert(s);
    });
});</script><form method="post" action="">
    <input type="text" name="uname" value="aaa">
    <input type="text" name="city" value="beijing">
    <input type="submit" value="" class=""></form>

JSON-Objekt< == > >Hinweis: IE8 (Kompatibilitätsmodus), IE7 und IE6 verfügen nicht über JSON-Objekte. Es wird empfohlen, die offizielle JSON-Methode zu verwenden und json.js einzuführen.

Upload-Schaltfläche (traditionelles Erscheinungsbild ändern) [Wichtig]

　2016-6-3 Änderungen

var s1={a:1,b:2,c:333}var s2=JSON.stringify(s1);　　　　
//将json对象转为字符串var s3=JSON.parse(s2);　　　　　　
//将json字符串转为json对象

Ziehen Sie nach unten, um die Popup-Ebene auszuwählen 　2016-4-1

<!-- 上传按钮（改变传统上传按钮外观） -->
<style type="text/css">
.filebtn-box {position:relative;width:120px;height:120px;overflow:hidden;}    
/* 总容器 */
.filebtn-hide{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;z-index:2;
    font-size:1000px;opacity:0;filter:alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
    /* 放在上层的透明的上传控件 */
    .filebtn-img{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;z-index:1;} 
    /* 用图片替代上传控件 */
    .filebtn-ipt{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;z-index:1;
    border:1px solid #ccc;background:#f8f8f8;color:#666;text-align:center;font-size:14px;font-weight:bold;border-radius:4px;} 
    /* 用按钮替代上传控件 */
    </style>
    <p class="filebtn-box">
    <input type="file" name="uploadimg" class="filebtn-hide">
    <img src="http://pic.58pic.com/58pic/14/73/88/32x58PICwrz_1024.jpg" class="filebtn-img"></p><hr><p class="filebtn-box">
    <input type="file" name="uploadimg" class="filebtn-hide">
    <input type="button" name="" class="filebtn-ipt" value="本地上传"></p>

Bestimmen Sie, ob ausgeblendet werden soll:

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    //房屋类型(弹出层)
    $(".js-housetype-btn").click(function(){
        $(&#39;.housetype-dropbox .absbox&#39;).slideToggle(200);
    });
    $(".housetype-dropbox .housetype-option").click(function(){
        $(this).addClass(&#39;active&#39;).siblings().removeClass(&#39;active&#39;);
        $(&#39;.js-housetype-btn&#39;).find(&#39;.ipt&#39;).val($(this).html());
        $(&#39;.housetype-dropbox .absbox&#39;).slideUp(500);
    });
});
</script>
<style type="text/css">
ul,li{margin:0;padding:0;list-style:none;}
dl,dt,dd,p{margin:0;padding:0;}
.l{float:left;}
.ipt-line{width:310px;height:42px;padding:0 25px;font-size:14px;line-height:42px;}
.ipt-line > dt{position:relative;float:left;color:#333;width:68px;height:42px;font-weight:bold;}
.ipt-line > dd{position:relative;float:left;color:#999;width:240px;height:42px;}
.ipt-line .ipt{display:block;color:#999;line-height:42px;height:42px;border:none;}
.ipt-line .js-area-btn{width:240px;height:42px;cursor:pointer;}
.js-housetype-btn .ipt{width:5em;}
.js-housetype-btn .housetype-icon{margin-top:20px;}
.housetype-dropbox{position:relative;height:0;}/* 房屋类型选择面板 */
.housetype-dropbox .absbox{position:absolute;display:none;left:0;top:0;width:323px;padding:14px 0 0 35px;background:#fff;border:1px solid #ececec;box-shadow:0 2px 10px #ccc;z-index:1;}
.housetype-dropbox .absbox .housetype-option{float:left;width:86px;height:28px;line-height:28px;background:#f1f1f1;color:#666;margin:0 10px 12px 0;text-align:center;cursor:pointer;}
.housetype-dropbox .absbox .housetype-option.active{background:#eb5405;color:#fff;}
</style>
<dl class="ipt-line clearfix">
    <dt class="l">类型</dt>
    <dd class="l js-housetype-btn"><input type="text" name="housetype" value="普通住宅" class="ipt l" disabled></dd>
</dl>
<!-- 下拉选择面板 start -->
<div class="housetype-dropbox">
    <ul class="absbox">
        <li class="housetype-option active">普通住宅</li>
        <li class="housetype-option">别墅</li>
        <li class="housetype-option">公寓</li>
        <li class="housetype-option">小户型</li>
    </ul>
</div>
<!-- 下拉选择面板 end -->

(Fügen Sie hier eine Kopie des Codes ein, um die Suche zu erleichtern.)

Das obige ist der detaillierte Inhalt vonHäufig verwendete Formularcodefreigabe in JavaScript (Sammlung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!