formValidator动态复制表单验证

最新推荐文章于 2024-09-09 08:57:25 发布

原创最新推荐文章于 2024-09-09 08:57:25 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

Javascript 同时被 3 个专栏收录

5 篇文章

订阅专栏

Jquery

4 篇文章

订阅专栏

formValidator

0 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的动态表单验证功能。通过添加按钮动态生成包含姓名和职位输入框的表单项，并即时进行验证。确保了用户输入的有效性和格式正确性。

<html>
<head>
<title></title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/formValidator.js" type="text/javascript"></script>
<script src="js/formValidatorRegex.js" type="text/javascript"></script>
<script>
var i=1;
function add(){
	setNewID();
	$('#container').append($('#new_item').html());
	i=i+1;
	bindValidate();
}
function setNewID()
{
	items = new Array('name','position');
	for (x in items)
	{
		modifyID(items[x]);
	}
}
function modifyID(className)
{
	$('#new_item .'+className).attr("id",className+(i+1));
	$('#new_item .'+className).next().attr("id",className+(i+1)+"Tip");
}


function bindValidate(){
				$(".name").each(function(){
								$(this).formValidator({onShow:"请输入姓名",onFocus:"至少1个长度",onCorrect:"输入正确"}).inputValidator({min:1,empty:{leftEmpty:false,rightEmpty:false,emptyError:"名称中不能有空格"},onError:"姓名不能为空,请确认"});
								if($(this).val()!="")$(this).blur();
				});
				$(".position").each(function(){
								$(this).formValidator({onShow:"请输入姓名职位",onFocus:"至少1个长度",onCorrect:"输入正确"}).inputValidator({min:1,empty:{leftEmpty:false,rightEmpty:false,emptyError:"名称中不能有空格"},onError:"职位不能为空,请确认"});
								if($(this).val()!="")$(this).blur();
				});
}
$(function(){
	 $.formValidator.initConfig({formID:"addform",theme:"126",submitOnce:true,ajaxPrompt : '有数据正在异步验证，请稍等...'	});
	bindValidate();
});
$(function(){
	add();
});
</script>
 </head>

 <body>
  
<form id="addform">
<div id="container">
</div>
<div><input type="submit" value="提交"/>
</form>
<div id="new_item" style="display:none;">
<fieldset>
	<div>
	<input id="name" class="name" name="name"/>
	<span id="nameTip"></span>
	</div>
	<div>
	<input id="position" class="position" name="position"/>
	<span id="positionTip"></span>
	</div>
</fieldset>
</div>
<button onclick="add();">添加</button>

 </body>
</html>