コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

JavaScript でよく使用されるフォーム コード共有 (コレクション)

黄舟
リリース： 2017-07-24 10:12:42
オリジナル
2228 人が閲覧しました

Mobile (テキストボックス): 


<input type="text" name="" maxlength="11" placeholder="" autocomplete="off">
ログイン後にコピー

基本的なフォーム検証 


<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>
ログイン後にコピー

checkbox(チェックボックス)の値


<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（ラジオボタン）の値


<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>
ログイン後にコピー

チェックボックスですべて選択（ネイティブ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>
ログイン後にコピー

チェックボックスですべて選択（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>
ログイン後にコピー

チェックボックス 自分自身をチェックし、以下のすべてのサブディレクトリのチェックボックスをオンにします。 .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>
ログイン後にコピー

テキストボックスの共通効果:

が「フォーカス」状態 ステータスでは、テキストが暗色。マウスを遠ざけると、テキストが明るい色に変わります。

テキストボックスが入力されていない（または空の）場合、プロンプトメッセージが表示されます。入力すると、文字の色が濃くなり、プロンプト メッセージが表示されなくなります。 


<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:

複数行テキストボックスフォームの検証: 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>
ログイン後にコピー

テキストボックスの文字長を計算します (中国語の 1 文字は英語の 2 文字としてカウントされます) ) 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>
ログイン後にコピー