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>

复制代码 代码如下:

<script type="text/javascript" src="js/indexjs"></script>