집 > 기사 > 웹 프론트엔드 > JavaScript에서 일반적으로 사용되는 양식 코드 공유(컬렉션)

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

黄舟원래의: 2017-07-24 10:12:422230검색

모바일(텍스트 상자):

<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

9dd4e74599c2814fa7e1870628278dc5
8019067d09615e43c7904885b5246f0a$(function(){
    $("#textarea").blur(function(){        
    var strLen = $(this).val().replace(/[^\x00-\xff]/g,'__').length;
        alert(strLen);
    });
});2cacc6d41bbb37262a98f745aa00fbf0
f9b593c2e93d9b585f67a6d67478e8ee
40587128eee8df8f03d0b607fe983014

3e4d0aaba075bbcddc2d09ee55a517f4 맞춤법 검사 속성은 맞춤법 검사를 수행할지 여부입니다(예: 호환되지 않음) 2016-6-12

텍스트 제한 숫자 입력만 허용하는 상자 ：　　　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">

드롭다운 상자 5b7a15bed8615d1b843806256bebea72:

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

텍스트 상자(드롭다운 프롬프트 ) :

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

텍스트 상자(두 번 클릭한 다음 자리 표시자의 값을 현재 값으로 설정)

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

confirm:

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

Serial 형식화된 값:　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 개체 7e86220f02db10634a6a67f8dcda189d JSON 문자열, 상호 변환: 　

참고: ie8(호환 모드), ie7 및 ie6에는 JSON 개체가 없는 것이 좋습니다. 공식 JSON 방식을 사용하고 json.js를 도입합니다.

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

按 업로드 버튼(기존 모양 변경) [중요]
2016-6-3 변경

<!-- 上传按钮（改变传统上传按钮外观） -->
<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>

핀치 레이어 2016-4-1

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

(또한 쉽게 검색하려면 여기에 코드를 복사하세요.)

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

위 내용은 JavaScript에서 일반적으로 사용되는 양식 코드 공유(컬렉션)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：javascript를 사용하여 div 모듈을 마우스 예제 코드로 드래그하는 방법에 대한 자세한 설명다음 기사：javascript를 사용하여 div 모듈을 마우스 예제 코드로 드래그하는 방법에 대한 자세한 설명