<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/messages_zh.js"></script>
<title>Title</title>
</head>
<body><p style="display: none;" id="copyDom">
<label for="myname">用户名:</label>
<!-- id和name最好同时写上 -->
<input id="myname" name="myname" value="" class="onlyLetterAndDigit"/> <label for="myadder">地址:</label>
<!-- id和name最好同时写上 -->
<input id="myadder" name="myadder" value="" class="onlyLetterAndDigites"/>
</p><form action="#" method="post" id="regForm">
<fieldset>
<legend>jquery-validate表单校验验证</legend>
<p>
<label for="myname" >用户名:</label>
<!-- id和name最好同时写上 -->
<input id="myname" name="myname" class="onlyLetterAndDigit"/>
<label for="myadder">地址:</label>
<!-- id和name最好同时写上 -->
<input id="myadder" name="myadder" class="onlyLetterAndDigites"/>
</p> <div id="addDoms"> </div>
<button id="addDom">新增</button> <input type="submit" value="提交">
</fieldset> <script> $.validator.addMethod("onlyLetterAndDigit",function(value, element, params){
var regex=new RegExp('^[0-9a-zA-Z]+$');
return regex.test(value);
},"只能输入字母或数字"); $.validator.addMethod("onlyLetterAndDigites",function(value, element, params){
var regex=new RegExp('^[0-9a-zA-Z]+$');
return regex.test(value);
},"只能输入字母或数字"); $(function () {
$("#regForm").validate({
submitHandler:function(form){
form.submit();
}
}); $("#addDom").click(function (event) {
event.preventDefault();
for ( var j = 0;j<3; j++ ) {
var Doms=$("#copyDom").clone();
$(Doms).css("display","block");
$(Doms).find("input[name='myname']").attr("id","myname"+j);
$(Doms).find("input[name='myadder']").attr("id","myadder"+j);
$("#addDoms").append(Doms); }
$("#regForm").validate();
for(var i=0;i<3;i++){
$("#myname"+i).rules("add",{onlyLetterAndDigit:true,messages: {
required: "请输入内容"}});
$("#myadder"+i).rules("add",{onlyLetterAndDigites:true,messages: {
required: "请输入内容"}});
$("#regForm").validate();
console.info($("#myname"+i));
console.info("-----------"+i); }
}) }) </script>
</form>
</body>
</html>
效果如下:当点击新增下面会多出来几个控件只有第一个控件验证有效,其余几个验证都没有用!!
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/messages_zh.js"></script>
<title>Title</title>
</head>
<body><p style="display: none;" id="copyDom">
<label for="myname">用户名:</label>
<!-- id和name最好同时写上 -->
<input id="myname" name="myname" value="" class="onlyLetterAndDigit"/> <label for="myadder">地址:</label>
<!-- id和name最好同时写上 -->
<input id="myadder" name="myadder" value="" class="onlyLetterAndDigites"/>
</p><form action="#" method="post" id="regForm">
<fieldset>
<legend>jquery-validate表单校验验证</legend>
<p>
<label for="myname" >用户名:</label>
<!-- id和name最好同时写上 -->
<input id="myname" name="myname" class="onlyLetterAndDigit"/>
<label for="myadder">地址:</label>
<!-- id和name最好同时写上 -->
<input id="myadder" name="myadder" class="onlyLetterAndDigites"/>
</p> <div id="addDoms"> </div>
<button id="addDom">新增</button> <input type="submit" value="提交">
</fieldset> <script> $.validator.addMethod("onlyLetterAndDigit",function(value, element, params){
var regex=new RegExp('^[0-9a-zA-Z]+$');
return regex.test(value);
},"只能输入字母或数字"); $.validator.addMethod("onlyLetterAndDigites",function(value, element, params){
var regex=new RegExp('^[0-9a-zA-Z]+$');
return regex.test(value);
},"只能输入字母或数字"); $(function () {
$("#regForm").validate({
submitHandler:function(form){
form.submit();
}
}); $("#addDom").click(function (event) {
event.preventDefault();
for ( var j = 0;j<3; j++ ) {
var Doms=$("#copyDom").clone();
$(Doms).css("display","block");
$(Doms).find("input[name='myname']").attr("id","myname"+j);
$(Doms).find("input[name='myadder']").attr("id","myadder"+j);
$("#addDoms").append(Doms); }
$("#regForm").validate();
for(var i=0;i<3;i++){
$("#myname"+i).rules("add",{onlyLetterAndDigit:true,messages: {
required: "请输入内容"}});
$("#myadder"+i).rules("add",{onlyLetterAndDigites:true,messages: {
required: "请输入内容"}});
$("#regForm").validate();
console.info($("#myname"+i));
console.info("-----------"+i); }
}) }) </script>
</form>
</body>
</html>
效果如下:当点击新增下面会多出来几个控件只有第一个控件验证有效,其余几个验证都没有用!!
解决方案 »
- javascript的匹配一个空字符串,正则表达式应该怎么写
- 动态加载梅花雪树1.0的子节点
- 奇怪的问题,朋友请帮忙看下 谢谢
- 请问如何更改form的提交页面?
- 这种效果如何做!!
- 请问怎样用javascript来限制用户上传文件的类型
- *********很简单的问题,请高手帮忙 ***********
- 过年好,超级紧急问题,如果动态控制iframe中包含的页面?高分求教
- showModalDialog 弹出的“网页对话框”,如何让对话框中的内容变得像普通网页一样可被选取/复制
- 孟兄请进!
- d3(数据可视化v4)d3.csv回调函数里生成的数据怎么保存进全局变量啊
- 百度ueditor中复制word图文时图片转存任然保持灰色不可用,谁能教我怎么解决?
解决办法是,动态添加时,name中加上唯一编号,比如:name='myname'+index,index在代码中递增就可以了。