首頁 >web前端 >js教程 >JavaScript中常用的form表單程式碼分享（收藏）

JavaScript中常用的form表單程式碼分享（收藏）

黄舟原創: 2017-07-24 10:12:422237瀏覽

手機（文字方塊）：

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

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>

文字方塊的一個常用效果：處於「焦點」狀態時，是深色字。滑鼠離開後，變成淺色字。

文字方塊沒有填寫時（或為空白時），顯示提示訊息。已填入後，文字顏色加深，並去除提示訊息。

<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

552ac683c0f554e98a10af6771e392eb spellcheck屬性是是否執行拼字檢查（ie不相容）　　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>

# 下拉框5b7a15bed8615d1b843806256bebea72

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

文字方塊（雙擊後面將placeholder 的值設為目前值）

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

confirm:

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

序列化表單值：

　　2016-4-13

#########

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

### ########## JSON物件7e86220f02db10634a6a67f8dcda189d JSON字串，互相轉換：###　#######註：ie8(相容模式),ie7和ie6沒有JSON對象，推薦採用JSON官方的方式，引入json.js 。 ############

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

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

######下拉選擇彈出層　　2016-4-1######

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

######判斷是否隱藏：######################################################################### #（也要放在這裡一份程式碼吧，方便找。）###rrreee### ###

以上是JavaScript中常用的form表單程式碼分享（收藏）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：javascript如何實作div模組用滑鼠拖曳實例程式碼詳解下一篇：javascript如何實作div模組用滑鼠拖曳實例程式碼詳解

看更多