jquery實現輸入框動態增減的實例代碼

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

　　通過字符串拼接將所有的輸入框中的內容用“##”這樣的格式拼接
網頁端代碼

復制代碼代碼如下:
<form>
<table>
<tr><th>手機</th>
    <td style="padding:px ;">
    <input type="hidden" name="usermobile" value="#" id="mobile"/>
    <div id="mobile_s_div">
    <input type="text" id="mobile_t" name="mobile_t" value="%{#sessionusermobile}" 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=textsplit("#");
    if(sslength>){
        $(#mobile_t)val(ss[]);
    }
    for(var i=;i<sslength;i++){
       addinput(mobile_s_div mobile_divss[i]);
    }
}
/**
字符串拼接
src_id 是源input的namedist_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=strsubstring(strlength);
    $(#+dist_id)val(str);
}
/**
克隆一個input顯示在指定的容器內
*/
function addinput(id div_id text){
    var mobile_div=$(#+id)clone();
    mobile_divchildren(input)val(text);
    var delbt=$("<input type=button value=刪除></input>")
    delbtbind("click" function(){$(this)parent()remove()});
    mobile_divappend(delbt)
    $(#+div_id)append(mobile_div);
    return false;
}
function check(){
    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 = objvalue;
    if(str==""){
        spantext();
        $(obj)removeClass("inputError");
        return false;
    }
    var pattern = /^d{}$/;
    if (!patternexec(objvalue)){//不匹配進行處理
        spantext(手機號碼填寫錯誤!)css("color""red");
        $(obj)addClass("inputError");
        return false;
    }else {
        spantext();
        $(obj)removeClass("inputError");
    }
}

　　
把js文件引入html文件

復制代碼代碼如下:
<script type="text/javascript" src="js/jqueryminjs"></script>

復制代碼代碼如下:

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20493.html