jquery实现输入框动态增减

2019独角兽企业重金招聘Python工程师标准>>>

主要功能是动态增减输入框，而且支持对各个输入框的检测。
每个输入框在输入内容后，对其进行错误提示
最后通过字符串拼接，将所有的输入框中的内容，用“1234235#34634234#123525”这样的格式拼接。

网页端代码：

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

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

转载于:https://my.oschina.net/kingfire/blog/32531