简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

JavaScript에서 일반적으로 사용되는 양식 코드 공유(컬렉션)

黄舟
풀어 주다： 2017-07-24 10:12:42
원래의
2202명이 탐색했습니다.

모바일(텍스트 상자): 


<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>
로그인 후 복사

체크박스(체크박스) 값 


<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>
로그인 후 복사

checkbox 모두 선택(기본 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>
로그인 후 복사

checkbox 모두 선택(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>
로그인 후 복사

checkbox 자신을 선택하고 아래의 모든 하위 디렉터리에 대한 확인란을 선택하세요. .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>
로그인 후 복사

텍스트 상자의 일반적인 효과:

is in "focus" 상태에서 텍스트는 in입니다. 어두운 색. 마우스를 멀리 이동하면 텍스트가 밝은 색상으로 변경됩니다.

텍스트 상자가 채워지지 않은 경우(또는 비어 있는 경우) 프롬프트 메시지가 표시됩니다. 입력이 완료되면 텍스트 색상이 어두워지고 프롬프트 메시지가 제거됩니다. 


<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>
로그인 후 복사