使用jquery增加删除input元素
将input输入内容加上限制
οninput=“value=value.replace(/[^\d|xX]/g,’’)”
身份证格式验证
或者
$(’#card’).attr(“oninput”, “this.value=this.value.replace(/[^0-9|xX]/g,’’);”);
id为card的input框输入限制为this.value=this.value.replace(/[^0-9|xX]/g,’’)
两种结果是一样的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
ul li{
display:block;
}
</style>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var t = $("#num");
$("#max").click(function() {
t.val(parseInt(t.val()) + 1); //点击加号输入框数值加1
if(t.val() <= 5) {
$('#main').find('ul').append("<li><p>姓名" + t.val() + ":<input type='text' name='order_name[]' autocomplete='off' required/></p><p>身份证" + t.val() + ":<input type='text' id='card' maxlength='18' name='order_card[]' autocomplete='off' required/><p/></li>");
$('#card').attr("oninput", "this.value=this.value.replace(/[^0-9|xX]/g,'');");
}
if(t.val() > 5) {
t.val(parseInt(t.val()) - 1); //最小值为1
}
});
$("#min").click(function() {
t.val(parseInt(t.val()) - 1); //点击减号输入框数值减1
$("#main li").last().remove();
if(t.val() <= 0) {
t.val(parseInt(t.val()) + 1); //最小值为1
}
});
});
</script>
</head>
<body>
<p>数量:
<input style="width:40px;" id="min" type="button" value="-" />
<input style="width:40px;" id="num" name="num" type="text" value="1" autocomplete="off" readOnly/>
<input style="width:40px;" id="max" type="button" value="+" />
</p>
<div>
<p>姓名1:<input type="text" name="order_name[]" autocomplete="off" required/></p>
<p>身份证1:<input type="text" name="order_card[]" maxlength='18' oninput="value=value.replace(/[^\d|xX]/g,'')" autocomplete="off" required/>
<p/>
<div id="main">
<ul></ul>
</div>
</div>
</body>
</html>
通过点击增加按钮来增加一组input框
点击删除按钮来删除一组input框
这里设置的最少一个,最多五个
根据需求来进行修改
效果图就不放了 大家复制代码自行修改吧