查了很多资料,而且在HTML中也是可以正常调用,但在javascript中就不能,烦请大家看看,特别注意用文字标明的地方
<html>
<head>
<title>动态增加文本框 </title>
<link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" />
<script type="text/javascript" src="mail.js"></script> //引用下面的checkaa.js <script type="text/javascript">
<!--
var textNumber = 1;
var delNumber=0;
var textarr = new Array();
function addTitle(rows){
return "提醒" + (rows+1) + ":";
}
function addaa(rows){
textarr[textarr.length] = rows+1;
return " <input type=\"+text\" name=\"date[]" + rows + "\" id=\"date" + rows + "\" />";
}
function addbb(rows)
{
return ' <input type="text" name="ot[]" id="ot" /> <input type="button" value="del" />';
}
function addtt(rows){
return " <input type=\"+text\" name=\"name[]" + rows + "\" id=\"name" + rows + "\" onclick="check_empty('text') />"; //在此引用方法,不起作用????
}
function addothers(rows){
return " <input type=\"+text\" name=\"email[]" + rows + "\" id=\"email" + rows + "\" onclick="check_email('email') />"; //在此引用方法,不起作用????
}
function addTextBox(worksId){
var works = document.getElementById(worksId);
var newRow = works.insertRow(-1);
var newCell = newRow.insertCell(0);
newCell.innerHTML = addTitle(textNumber);
newCell = newRow.insertCell(1);
newCell.innerHTML = addtt(textNumber);
newCell = newRow.insertCell(2);
newCell.innerHTML = addaa(textNumber);
newCell = newRow.insertCell(3);
newCell.innerHTML = addothers(textNumber);
newCell = newRow.insertCell(4);
newCell.innerHTML = addbb(textNumber);
textNumber++;
}
//-->
</script>
<style type="text/css">
<!--
label {
display:block;
margin:.25em 0em;
}
-->
</style>
</head>
<body>
<form name="form" onSubmit="return validate_form()" method="post" action="aa.php" > // 引用事件
<table>
<td>提醒1: </td>
<td>
<input type="text" name="name[]" id="name" onclick="check_empty('text')/> </td> //html引用方法,可以正常使用
<td> <input type="text" name="date[]" id="date" />
<td> <input type="text" name="email[]" id="email" onclick="check_email('email') "/> </td> //html引用方法,可以正常使用
</label>
</tr>
<table id="works">
</table>
<p>
<input type="button" value="增加一行" />
<p> <input type="Submit" value="提交保存" /> </p>
</form>
</body>
</html>checkaa.jsfunction validate_form()
{
if(!check_empty(document.form.content.value)|| document.form.content.value=='')
{
alert( 'Sorry!Please Fill in your name ');
return false;
} if (!check_email(document.form.email.value) || document.form.email.value=='')
{
alert( 'Sorry!Please Fill in the correct Email address ');
return false;
}
/* if (!check_empty(document.form.company.value))
{ alert( 'Sorry!Please Fill in your company ');
return false;
} */
}function check_email(email) {
//var pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
var pattern = /^\w+((-\w+) |(\.\w+))*\@[A-Za-z0-9]+((\. |-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
flag = pattern.test(email);
if(!flag&&email.length>0){
return false;
}
return true;
} function check_empty(text) {
return (text.length > 0);
}
<html>
<head>
<title>动态增加文本框 </title>
<link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" />
<script type="text/javascript" src="mail.js"></script> //引用下面的checkaa.js <script type="text/javascript">
<!--
var textNumber = 1;
var delNumber=0;
var textarr = new Array();
function addTitle(rows){
return "提醒" + (rows+1) + ":";
}
function addaa(rows){
textarr[textarr.length] = rows+1;
return " <input type=\"+text\" name=\"date[]" + rows + "\" id=\"date" + rows + "\" />";
}
function addbb(rows)
{
return ' <input type="text" name="ot[]" id="ot" /> <input type="button" value="del" />';
}
function addtt(rows){
return " <input type=\"+text\" name=\"name[]" + rows + "\" id=\"name" + rows + "\" onclick="check_empty('text') />"; //在此引用方法,不起作用????
}
function addothers(rows){
return " <input type=\"+text\" name=\"email[]" + rows + "\" id=\"email" + rows + "\" onclick="check_email('email') />"; //在此引用方法,不起作用????
}
function addTextBox(worksId){
var works = document.getElementById(worksId);
var newRow = works.insertRow(-1);
var newCell = newRow.insertCell(0);
newCell.innerHTML = addTitle(textNumber);
newCell = newRow.insertCell(1);
newCell.innerHTML = addtt(textNumber);
newCell = newRow.insertCell(2);
newCell.innerHTML = addaa(textNumber);
newCell = newRow.insertCell(3);
newCell.innerHTML = addothers(textNumber);
newCell = newRow.insertCell(4);
newCell.innerHTML = addbb(textNumber);
textNumber++;
}
//-->
</script>
<style type="text/css">
<!--
label {
display:block;
margin:.25em 0em;
}
-->
</style>
</head>
<body>
<form name="form" onSubmit="return validate_form()" method="post" action="aa.php" > // 引用事件
<table>
<td>提醒1: </td>
<td>
<input type="text" name="name[]" id="name" onclick="check_empty('text')/> </td> //html引用方法,可以正常使用
<td> <input type="text" name="date[]" id="date" />
<td> <input type="text" name="email[]" id="email" onclick="check_email('email') "/> </td> //html引用方法,可以正常使用
</label>
</tr>
<table id="works">
</table>
<p>
<input type="button" value="增加一行" />
<p> <input type="Submit" value="提交保存" /> </p>
</form>
</body>
</html>checkaa.jsfunction validate_form()
{
if(!check_empty(document.form.content.value)|| document.form.content.value=='')
{
alert( 'Sorry!Please Fill in your name ');
return false;
} if (!check_email(document.form.email.value) || document.form.email.value=='')
{
alert( 'Sorry!Please Fill in the correct Email address ');
return false;
}
/* if (!check_empty(document.form.company.value))
{ alert( 'Sorry!Please Fill in your company ');
return false;
} */
}function check_email(email) {
//var pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
var pattern = /^\w+((-\w+) |(\.\w+))*\@[A-Za-z0-9]+((\. |-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
flag = pattern.test(email);
if(!flag&&email.length>0){
return false;
}
return true;
} function check_empty(text) {
return (text.length > 0);
}
解决方案 »
- EasyUI新组件-拖拽类EasyDragDrop,弹出层基类EasyLayer,遮罩类EasyMask,Popup类
- 正则 如何replace 字符中的 /
- 我的这段js函数完成替换功能为什么不成功
- 怎么通过imageID.style.posLeft方法让图片在页面上随机跑动呢?
- 关于showModalDialog的问题!!
- js 对隐藏的value选择框进行选中事件..要怎么做- -
- 使用javascript 加载其他站点的xml数据
- 把excel贴在网页上,为什么输入18位身份证号码时候,最后三位被自动置0???
- javascript中有没有循环语句的 像for语句的这种循环格式是怎么样的
- js省市联动,和页面跳转的结合使用
- asp读取javascript建立的cookie,为什么在 Firefox读不出来,ie可以!!!!!!!!!!!1
- 一个类似数据库在线编辑的问题
<script type="text/javascript" src="mail.js"></script> <script type="text/javascript"> function addtt(rows){
return " <input type=\"+text\" name=\"name[]" + rows + "\" id=\"name" + rows + "\" onclick="check_empty('text') />"; //在此引用方法,不起作用????
}
function addothers(rows){
return " <input type=\"+text\" name=\"email[]" + rows + "\" id=\"email" + rows + "\" onclick="check_email('email') />"; //在此引用方法,不起作用????
} </javascript>
function addtt(rows){
return '<input type="text" name="name[]"' + rows + '" id="name"' + rows + '" onclick="check_empty(\'text\') \/>' ; //在此引用方法,不起作用????
} function addothers(rows){
return ' <input type="text" name="email[]"' + rows + '" id="email"' + rows + '" onclick="check_email(\'email\') \/>'; //在此引用方法,不起作用????
}
"<input type=\"+text+
这里的\"多余,或者+多余,实际用单引号将省好多事
str = "<input type='text' name='name[]"+rows+"' id='name"+rows+"' onclick=check_empty('text')"
return str;
谢谢wpabbs,还是不行! function addtt(rows){
return '<input type="text" name="name[]"' + rows + '" id="name"' + rows + '" onclick="check_empty(\'text\') \/>' ; //在此引用方法,不起作用????
}
这两者不一样吗?
alert(text);
return (text.length > 0);
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function addrow()
{
var tmp = document.getElementById("standrow").getElementsByTagName("tr");
var newrow = tmp[0].cloneNode(true);
var child = newrow.getElementsByTagName("input");
for(var i=0;i<child.length;i++)
{
child[i].value = "";
}
var fir = newrow.getElementsByTagName("td")[0];
fir.innerHTML = "提醒" + (tmp.length + 1) + ":";
tmp[0].parentNode.appendChild(newrow);
}
function check_empty(obj)
{
var txt = obj.value;
alert(txt);
}
function check_email(obj)
{
var txt = obj.value;
alert(txt);
}
</script>
</head>
<body>
<form name="form" onSubmit="return validate_form()" method="post" action="aa.php" > // 引用事件
<table>
<tbody id="standrow">
<tr>
<td>提醒1: </td>
<td>
Name:<input type="text" name="name[]" id="name" onblur="check_empty(this)" />
</td>
<td>
Date:<input type="text" name="date[]" id="date" />
</td>
<td>
Email:<input type="text" name="email[]" id="email" onblur="check_email(this) " />
</td>
</tr>
</tbody>
</table>
<table id="works">
</table>
<p>
<input type="button" value="增加一行" onclick="javascript:void(addrow());"/>
<p><input type="Submit" value="提交保存" /> </p>
</form>
</body>
</html>可以增加多行的
你这样还是不行现在出现问题是这样的,在FORM中调用JS的方法是可以用的,但在动态增加文本框中调用就不管用了,不知是调用方法不对,还是语法不对,还是根本就不能这么做
首先调用是没问题
在同一个页中的form的table中是可以用的,证明调用是没问题, 请看代码的最下面有个form 但是这个页面还有一个功能就是"增加一行",在增加一行或多行时一并提交时,JS脚本不管用了
也就是增加多行后,任何一行的name,email是空值或者非邮件址,都能提交,没有任何验证
{
var listTable = document.getElementById("works");
var trList = listTable.getElementsByTagName("TR");
if(trList.length==0)
{
alert("至少设置两个提醒");
return false;
}
var lsize = document.form.rowsNum.value;
for(i = 1;i<lsize;i++){
try{//如果某些记录会被删除,所以加上异常处理
var contents = document.getElementById("content[]"+i);
var emails = document.getElementById("email[]"+i);
//以下代码你自己写吧,分行验证标题和邮件
alert("验证第 " + (i+1) +"行数据,标题:" + contents.value +" Email: " + emails.value);
}catch(err){}
}
return false;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function addrow()
{
var tmp = document.getElementById("standrow").getElementsByTagName("tr");
var newrow = tmp[0].cloneNode(true);
var child = newrow.getElementsByTagName("input");
for(var i=0;i<child.length;i++)
{
child[i].value = "";
}
var fir = newrow.getElementsByTagName("td")[0];
fir.innerHTML = "提醒" + (tmp.length + 1) + ":";
tmp[0].parentNode.appendChild(newrow);
}
function check_empty(txt)
{
if(txt.length>0)
return true;
else
return false;
}
function check_email(txt)
{
if(/^\w+((-\w+) |(\.\w+))*\@[A-Za-z0-9]+((\. |-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(txt))
return true;
else
return false;
} function validate_form()
{
var d = document.getElementById("standrow");
var row = d.getElementsByTagName("tr");
for(var i=0;i<row.length;i++)
{
var tmpRow = row[i].getElementsByTagName("input");
var nameI = tmpRow[0].value;
var emailI = tmpRow[2].value;
if(!check_empty(nameI))
{
alert("Sorry!Please Fill in your name");
tmpRow[0].focus();
return false;
}
if(!check_email(emailI))
{
alert("Sorry!Please Fill in the correct Email address ");
tmpRow[2].focus();
return false;
}
}
return true;
}
</script>
</head>
<body>
<form name="form" onSubmit="return validate_form()" method="post" action="aa.php" > // 引用事件
<table>
<tbody id="standrow">
<tr>
<td>提醒1: </td>
<td>
Name:<input type="text" name="name[]" id="name" />
</td>
<td>
Date:<input type="text" name="date[]" id="date" />
</td>
<td>
Email:<input type="text" name="email[]" id="email" />
</td>
</tr>
</tbody>
</table>
<table id="works">
</table>
<p>
<input type="button" value="增加一行" onclick="javascript:void(addrow());"/>
<p><input type="Submit" value="提交保存" /> </p>
</form>
</body>
</html>完美解決方案!!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function addrow()
{
var tmp = document.getElementById("standrow").getElementsByTagName("tr");
var newrow = tmp[0].cloneNode(true);
var child = newrow.getElementsByTagName("input");
for(var i=0;i<child.length;i++)
{
child[i].value = "";
}
var fir = newrow.getElementsByTagName("td")[0];
fir.innerHTML = "提醒" + Math.floor(Math.floor(tmp[tmp.length-1].getElementsByTagName("td")[0].innerHTML.replace(/[^\d]/gi,""))+ 1) + ":";
tmp[0].parentNode.appendChild(newrow);
}
function removerow(obj)
{
var tmp = obj.parentNode.parentNode;
var curRow = tmp.getElementsByTagName("td")[0].innerHTML;
var curNum =curRow.replace(/[^\d]/gi,"");
tmp.parentNode.removeChild(tmp);
}
function check_empty()
{
if(txt.length>0)
return true;
else
return false;
}
function check_email()
{
if(/^\w+((-\w+) |(\.\w+))*\@[A-Za-z0-9]+((\. |-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(txt))
return true;
else
return false;
}
</script>
</head>
<body>
<form name="form" onSubmit="return validate_form()" method="post" action="aa.php" > // 引用事件
<table>
<tbody id="standrow">
<tr>
<td>提醒1: </td>
<td>
Name:<input type="text" name="name[]" id="name" onblur="check_empty(this)" />
</td>
<td>
Date:<input type="text" name="date[]" id="date" />
</td>
<td>
Email:<input type="text" name="email[]" id="email" onblur="check_email(this) " />
<button type="button" onclick="javascript:void(removerow(this));">删除</button>
</td>
</tr>
</tbody>
</table>
<table id="works">
</table>
<p>
<input type="button" value="增加一行" onclick="javascript:void(addrow());"/>
<p><input type="Submit" value="提交保存" /> </p>
</form>
</body>
</html>
var curRow = tmp.getElementsByTagName("td")[0].innerHTML;
var curNum =curRow.replace(/[^\d]/gi,"");
自己查一下少了什么就知道了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function addrow()
{
var tmp = document.getElementById("standrow").getElementsByTagName("tr");
var newrow = tmp[0].cloneNode(true);
var child = newrow.getElementsByTagName("input");
for(var i=0;i<child.length;i++)
{
child[i].value = "";
}
var fir = newrow.getElementsByTagName("td")[0];
fir.innerHTML = "提醒" + Math.floor(Math.floor(tmp[tmp.length-1].getElementsByTagName("td")[0].innerHTML.replace(/[^\d]/gi,""))+ 1) + ":";
tmp[0].parentNode.appendChild(newrow);
}
function removerow(obj)
{
var tmp = obj.parentNode.parentNode;
var curRow = tmp.getElementsByTagName("td")[0].innerHTML;
var curNum =curRow.replace(/[^\d]/gi,"");
tmp.parentNode.removeChild(tmp);
}
function check_empty(txt)
{
if(txt.length>0)
return true;
else
return false;
}
function check_email(txt)
{
if(/^\w+((-\w+) |(\.\w+))*\@[A-Za-z0-9]+((\. |-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(txt))
return true;
else
return false;
}
function validate_form()
{
var d = document.getElementById("standrow");
var row = d.getElementsByTagName("tr");
for(var i=0;i<row.length;i++)
{
var tmpRow = row[i].getElementsByTagName("input");
var nameI = tmpRow[0].value;
var emailI = tmpRow[2].value;
if(!check_empty(nameI))
{
alert("Sorry!Please Fill in your name");
tmpRow[0].focus();
return false;
}
if(!check_email(emailI))
{
alert("Sorry!Please Fill in the correct Email address ");
tmpRow[2].focus();
return false;
}
}
return true;
}
</script>
</head>
<body>
<form name="form" onSubmit="return validate_form()" method="post" action="aa.php" > // 引用事件
<table>
<tbody id="standrow">
<tr>
<td>提醒1: </td>
<td>
Name:<input type="text" name="name[]" id="name" onblur="check_empty(this)" />
</td>
<td>
Date:<input type="text" name="date[]" id="date" />
</td>
<td>
Email:<input type="text" name="email[]" id="email" onblur="check_email(this) " />
<button type="button" onclick="javascript:void(removerow(this));">删除</button>
</td>
</tr>
</tbody>
</table>
<table id="works">
</table>
<p>
<input type="button" value="增加一行" onclick="javascript:void(addrow());"/>
<p><input type="Submit" value="提交保存" /> </p>
</form>
</body>
</html>