jquery實現(xiàn)輸入框動態(tài)增減的實例代碼

更新時間：2013年07月14日 15:15:55 作者：

主要功能是動態(tài)增減輸入框，而且支持對各個輸入框的檢測，每個輸入框在輸入內容后，對其進行錯誤提示

通過字符串拼接，將所有的輸入框中的內容，用“1234235#34634234#123525”這樣的格式拼接。
網(wǎng)頁端代碼：

<form>
<table>
<tr><th>手機：</th>
    <td style="padding:10px 0;">
    <input type="hidden" name="user.mobile" value="124213#243463" id="mobile"/>
    <div id="mobile_s_div">
    <input type="text" id="mobile_t" name="mobile_t" value="%{#session.user.mobile}" onchange="checkMobilephone(this)" onkeyup="checkMobilephone(this)"/>
    <span></span>
    </div>
    <div id="mobile_div"></div>
    <input type="submit" onclick="return addinput('mobile_s_div', 'mobile_div', '')" value='再添加一個' ></input>
    </td>
</tr>
</table>
</form>

js代碼：

復制代碼代碼如下:

$(function() {
    //初始化
    initFields();
});
function initFields(){
    //初始化手機
    var text = $('#mobile').val();
    var ss=text.split("#");
    if(ss.length>0){
        $('#mobile_t').val(ss[0]);
    }
    for(var i=1;i<ss.length;i++){
       addinput('mobile_s_div', 'mobile_div',ss[i]);
    }
}
/**
字符串拼接
src_id 是源input的name，dist_id是目標input的id值
*/
function compose(src_name, dist_id){
    var str="";
    var ss = $('input[name='+src_name+']').each(function(i){
        if($(this).val() != "")
            str+='#'+$(this).val();
    });
    str=str.substring(1,str.length);
    $('#'+dist_id).val(str);
}
/**
克隆一個input，顯示在指定的容器內
*/
function addinput(id, div_id, text){
    var mobile_div=$('#'+id).clone();
    mobile_div.children('input').val(text);
    var delbt=$("<input type='button' value='刪除'></input>")
    delbt.bind("click", function(){$(this).parent().remove()});
    mobile_div.append(delbt)
    $('#'+div_id).append(mobile_div);
    return false;
}
function check1(){
    compose('mobile_t', 'mobile');
}
//<input type="text" onkeyup="checkMobilephone(this)"/><span/>
function checkMobilephone(obj){
    if(obj == null){
        return false;
    }
    var span = $(obj).parent().children('span');
    var str = obj.value;
    if(str==""){
        span.text('');
        $(obj).removeClass("inputError");
        return false;
    }
    var pattern =  /^1\d{10}$/;
    if (!pattern.exec(obj.value)){//不匹配,進行處理
        span.text('手機號碼填寫錯誤!').css("color","red");
        $(obj).addClass("inputError");
        return false;
    }else {
        span.text('');
        $(obj).removeClass("inputError");
    }
}

把js文件引入html文件
1

復制代碼代碼如下:

復制代碼代碼如下:

您可能感興趣的文章:

jQuery 事件的命名空間簡單了解
用 jQuery 綁定和解綁事件監(jiān)聽器都是非常簡單的，怎樣精確地解綁其中一個監(jiān)聽器？我們需要了解一下事件的命名空間，感興趣的朋友不要錯過
2013-11-11
jQuery基于隨機數(shù)解決中午吃什么去哪吃問題示例
這篇文章主要介紹了jQuery基于隨機數(shù)解決中午吃什么去哪吃問題,涉及jQuery基于事件響應及隨機數(shù)動態(tài)操作頁面元素相關實現(xiàn)技巧,需要的朋友可以參考下
2018-12-12
jQuery中ajax的load()與post()方法實例詳解
這篇文章主要介紹了jQuery中ajax的load()與post()方法,結合實例詳細分析了jQuery中l(wèi)oad()與post()方法實現(xiàn)ajax交互的相關技巧與注意事項,需要的朋友可以參考下
2016-01-01
用模版生成HTML的的框架jquery.tmpl使用詳解
這篇文章主要介紹了用模版生成HTML的的框架jquery.tmpl使用詳解,需要的朋友可以參考下
2015-01-01
使用jquery判斷一個元素是否含有一個指定的類(class)實例
下面小編就為大家?guī)硪黄褂胘query判斷一個元素是否含有一個指定的類(class)實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
使用jQuery仿蘋果官網(wǎng)焦點圖特效
這篇文章主要介紹了使用jQuery仿蘋果官網(wǎng)焦點圖特效,非常的炫酷，需要的朋友可以參考下
2014-12-12
jQuery 中使用JSON的實現(xiàn)代碼
json 是 Ajax 中使用頻率最高的數(shù)據(jù)格式，在瀏覽器和服務器中之間的通訊可離不開它
2011-12-12
單擊按鈕發(fā)送驗證碼,出現(xiàn)倒計時的簡單實例
下面小編就為大家?guī)硪黄獑螕舭粹o發(fā)送驗證碼,出現(xiàn)倒計時的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
Ajax搜索結果頁面下方的分頁按鈕的生成
前幾天在做項目的時候遇到個小問題，就是分頁結果的頁數(shù)太多一般5頁到10頁就結束了可是這個分頁結果有400多頁的當時就有些抓狂了，后來想了想模仿搜索引擎的結果頁面
2012-04-04
jQuery+PHP打造滑動開關效果
這篇文章主要介紹了jQuery+PHP打造滑動開關效果,實現(xiàn)類似360安全衛(wèi)士防火墻開啟關閉的開關,非常的實用，這里推薦給大家
2014-12-12