jquery实现输入框动态增减的实例代码

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

　　$(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");

　　}

　　}

　　<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

　　<script type="text/javascript" src="js/index.js"></script>