Убедитесь, что пользователь не может отправить менее 5 цифр для почтового индекса в форме JavaScript.

Я создаю регистрационную форму, и мне нужен способ запретить пользователям отправлять менее 5 номеров для почтового индекса. Когда я полностью комментирую свою попытку для else if, работает другая функция (гарантирующая, что пользователи не отправят никаких писем). Я использую return false в конце, чтобы форма не отправлялась, и я мог проверить неверный ввод. Извините за отсутствие jsfiddle - по какой-то причине он не позволял мне отправлять формы (я нуб, так что это может быть причиной). Вот фрагмент моего кода:

HTML:

<form name="reg" onSubmit="return formValidation();">    
<p>Zip Code: <input type="text" id="zip" maxlength="5" name="zip"></p>
<input type="submit" id="submitbutton" name="submitbutton" value="Submit" />
<div id="msg"></div> 
</form>

JS:

function formValidation()  
{  
    var zip = document.reg.zip; 
    allnumeric(zip);

function allnumeric(zip)
{   
    var numbers = /^[0-9]+$/;  
    if(zip.value.match(numbers))  
    {  
        document.getElementById("msg").innerHTML=("OK &#x2713;");
        msg.style.color="green";
    }  
    else if (zip.numbers < 5) /*DOES NOT COMPUTE*/
    {
        msg.innerHTML=("Has to be 5 numbers.");
        msg.style.color="red";
    }
    else
    {  
        msg.innerHTML=("Numbers only please.");
        msg.style.color="red";
    }  
};  
    return false;
};

javascript forms function html zipcode
person user3361043    schedule 24.03.2014    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Вы хотите zip.value.length, а не zip.numbers.

Вы также можете сделать все это с помощью регулярного выражения:

var numbers = /^\d{5}$/;  
if(zip.value.match(numbers))  
{  
    document.getElementById("msg").innerHTML=("OK &#x2713;");
    msg.style.color="green";
}  
else
{  
    msg.innerHTML=("Numbers only please.");
    msg.style.color="red";
}
person Pointy    schedule 24.03.2014
comment
Хорошее решение. Мне действительно нужно прочитать регулярное выражение. Сейчас для меня это чистое колдовство. - person user3361043; 25.03.2014

arrow_upward
6
arrow_downward

Я бы предложил использовать HTML5

<form name="reg" onSubmit="return formValidation();">
    <p>Zip Code:
        <input type="text" id="zip" pattern="\d{5}" maxlength="5" name="zip" required="required" />
    </p>
    <input type="submit" id="submitbutton" name="submitbutton" value="Submit" />
    <div id="msg"></div>
</form>

FIDDLE

person adeneo    schedule 24.03.2014

arrow_upward
2
arrow_downward

Я думаю, что другие ответы охватывают суть вашего вопроса JS, но не аспект качества данных, поскольку я не думаю, что вы действительно должны проверять почтовый индекс таким образом.

Вы, безусловно, придерживаетесь правильного подхода, пытаясь обеспечить качество пользовательского ввода, но просто проверки 5 чисел может быть недостаточно.

Существуют десятки тысяч адресов, где 4- или 3-значный почтовый индекс следует считать допустимым вводом, где почтовый индекс начинается с одного или двух нулей. Вот некоторые примеры:

  • Бриджтон, Нью-Джерси 08302
  • Холтсвилл, Нью-Йорк 00544
  • Adjuntas, PR 00601 (Все почтовые индексы в Пуэрто-Рико начинаются с 00)
  • Кристианстед, VI 00821

Пользователи часто опускают начальный 00/0, и это действительно должно быть разрешено в вашей форме — они могут счесть это неприятным отвлечением от вашего рабочего процесса, если пользователи получают удобное встроенное сообщение проверки, сообщающее им, что они неверны, когда они знают, что это не так.

Второй возможный недостаток (опять же в зависимости от вашего рабочего процесса) заключается в том, что люди могут вводить zip+4 тоже. Вы, вероятно, не хотите ограничивать их только 5, когда вы можете получить полные 9.

Это означает, что ваш JS-тест нужно будет обновить, чтобы учесть комбинации, но это приведет к более надежному конечному продукту. Как минимум, я бы посоветовал включить в форму примеры почтовых индексов (текст-заполнитель или аналогичный), которые включают регистр «00», чтобы пользователи знали, что от них ожидается. Чтобы разрешить ввод необязательных +4, обновите регулярное выражение до:

var numbers = ^\d{5}(-\d{4})?$;  
if(zip.value.match(numbers))  
{
    ....
}
else
{
    ...
}

И, наконец, лучший способ убедиться, что вы улавливаете правильный почтовый индекс и что они правильно связаны с адресом, — это проверить все это (независимо от длины почтового индекса). Эти службы проверки, которые вы либо создаете и поддерживаете сами, либо пользуетесь услугами третьей стороны (например, моя компания — http://www.qas.com/products/on-demand-address-validation.htm) может ускорить захват адреса и убедиться, что он действителен - справляется с 3, 4 или 5 цифрами zip, расширение адреса с отсутствующими +4, исправление опечаток в zip или других элементах адреса.

Надеюсь, что это поможет и удачи!

Al.

person Al Mills    schedule 25.03.2014