#javascript
#javascript
Вопрос:
Я пытаюсь перебирать поля формы и проверять соответствие регулярным выражениям, хранящимся в массивах. Не вижу, что здесь не так. Пожалуйста, есть идеи?
<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>
Ответ №1:
Давайте начнем с самого верха.
Это не имеет никакого смысла:
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}) $/ ]
];
Также обратите внимание на var перед frmflds , это сохранит вашу переменную красивой и локализованной, а не сделает ее глобальной.
Затем мы приходим к этому, и это тоже не имеет никакого смысла:
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;
}
Это должно дать вам что-то, что, по крайней мере, будет выполняться. Дальнейшая отладка оставлена в качестве упражнения для читателя.
Ответ №2:
вместо того, чтобы пытаться перебирать их, почему бы вам не использовать jQuery Validate, это охватывало бы все стандартные проверки. затем, если у вас есть пользовательское регулярное выражение, которое вы хотите запускать, вы можете использовать функцию addMethod (), это избавит вас от головной боли и хорошо документировано
вот пример того, как добавить метод проверки