我正在尝试循环通过表单字段和验证存储在数组中的正则表达式。我看不出有什么问题。有什么想法吗?
<script type="text/javascript">//<![CDATA[
//Adds my event listener so that page loads before form becomes operational
if(window.addEventListener){
window.addEventListener("load",initVal,false);
}else if (window.attachEvent){
window.attachEvent("onload",initVal);
} else { window.onload=initVal;}
function initVal() {
document.orderform.postcode.onchange=checkAll;
document.orderform.email.onchange=checkAll;
}
function checkAll(){
//create 2-dimensional array
frmflds= new Array (2);
for (i=0;i<frmflds.length;i++) {
frmflds [i] = new Array (2);
//populate arrays
frmflds[0][0] = 'postcode';
frmflds[0][1] = '/^[A-z][A-z]d{2}sd{2}[A-z][A-z]|[A-z][A-z]d{1}sd{1}[A-z][A-z]$/';
frmflds[1][0] = 'email';
frmflds[1][1] = '/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/'; }
// loop through form elements and validate against regex stored in array
for(var j = 0; j < frmflds.length; j++) {
var e = frmflds[j][0][1];
var OK= (e.exec(document.orderform.getElementById()[j].name.value);
if !OK
{
document.orderform.name[j].style.borderColor="red";
document.orderform.name[j].style.backgroundColor="pink";
document.orderform.Submit.onclick.disabled=true;
alert("Please correct any highlighted fields and submit again!");
}
else{
document.orderform.name[j].style.borderColor="Green";
document.orderform.name[j].style.backgroundColor="PaleGreen";
document.orderform.Submit.onclick.disabled=false;
}
} }
//]]></script>
</head>
<body>
<form method="post" action=""" name="orderform" id="orderfm">
<p><input type="text" name="postcode" id="postcode" ></p>
<p><input type="text" name="email" id="email" ></p>
<p><input label="" type="submit" name="Submit" value="Submit" id="Submit" disabled="disabled">
</form>
</body>
</html>
让我们从顶部开始。
这没有任何意义:
frmflds = new Array(2);
for(i = 0; i < frmflds.length; i++) {
frmflds[i] = new Array(2);
//populate arrays
frmflds[0][0] = 'postcode';
frmflds[0][1] = '/^[A-z][A-z]d{2}sd{2}[A-z][A-z]|[A-z][A-z]d{1}sd{1}[A-z][A-z]$/';
frmflds[1][0] = 'email';
frmflds[1][1] = '/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/';
}
你将遍历数组两次并每次将frmflds[i]设置为一个新的双元素数组;这很合理，但是每次在数组中你都把frmflds设置为相同的值。在第一次迭代中，frmflds[1]没有任何有用的东西但是你把它当作一个数组，所以一切都停在那里因为你不能把一个未定义的值当作一个数组。在JavaScript引擎关闭此循环之前，您的代码甚至不会通过此循环的一次迭代。正则表达式和字符串是不同的东西，所以你不想把正则表达式用字符串一样的单引号括起来。我想你想要更简单的:
var frmflds = [
[ 'postcode', /^[A-z][A-z]d{2}sd{2}[A-z][A-z]|[A-z][A-z]d{1}sd{1}[A-z][A-z]$/ ],
[ 'email', /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/ ]
];
还要注意frmflds前面的var，这将使您的变量保持良好和本地化，而不是使其全局。
然后我们来到这个，它也没有任何意义:
for(var j = 0; j < frmflds.length; j++) {
var e = frmflds[j][0][1];
var OK= (e.exec(document.orderform.getElementById()[j].name.value);
if !OK {
document.orderform.name[j].style.borderColor="red";
document.orderform.name[j].style.backgroundColor="pink";
document.orderform.Submit.onclick.disabled=true;
alert("Please correct any highlighted fields and submit again!");
}
else{
document.orderform.name[j].style.borderColor="Green";
document.orderform.name[j].style.backgroundColor="PaleGreen";
document.orderform.Submit.onclick.disabled=false;
}
}
请记住，frmflds是一个二维数组，而不是三维数组;所以，var e = frmflds[j][0][1];不会做任何有用的事情。我想你需要这个:
var re = frmflds[j][1]; // This is where the regex is
现在，getElementById()是document的一个方法，它需要一个ID作为参数，getElementById()也返回单个元素(不是数组)，所以你想要这个:
var el = document.getElementById(frmflds[j][0]);
var OK = re.exec(el.value);
您的if语句需要括号。而且，如果你的表单元素有id属性，使用它们，而不是试图通过document.orderform:
var submit = document.getElementById('Submit');
if(!OK) {
el.style.borderColor = 'red';
el.style.backgroundColor = 'pink';
submit.disabled = true;
alert('Please correct any highlighted fields and submit again!');
}
else
el.style.borderColor = 'green';
el.style.backgroundColor = 'palegreen';
submit.disabled = false;
}
这应该能让你得到至少能运行的东西。进一步调试留给读者作为练习。
不要尝试遍历它们，为什么不使用jQuery Validate呢?这将涵盖所有标准验证。然后，如果你有自定义的正则表达式，你可以使用addMethod()函数，它会为你节省很多头疼，它的文档很好
下面是一个如何添加验证方法的示例