Javascript表单验证

时间:2012-12-15 03:56:38

标签: javascript forms validation

我正在尝试验证HTML表单上的输入。我试图使用一个脚本来验证具有几个相似元素的各种表单。总而言之,大约有15个不同的字段,但我只是放3个。以下工作在具有所有元素的表单上但在任何没有特定字段的表单上都失败。

if (form.name.value == ""){ // Check if blank
    alert( "\nEnter a name." );
    form.name.focus();
    return false; // Stop the form processing.
    } 

else if ( !/^\w{10}$/.test( form.phone.value )) { // Check for phone
    form.name.style.border=""
    alert( "\nEnter a valid phone number!" );
    form.phone.focus();
    return false; // Stop the form processing.
    } 

else{
 return true; // Submit!

由于这仅在所有存在的情况下都有效,我想要做的只是验证它是否存在。我已经尝试在一个语句下嵌套验证,该语句应该在尝试验证之前检查元素,如果元素不存在,它应该继续下一个。

if (document.forms[0].name){ //does field exist?
    if (form.name.value === ""){
        alert( "\nEnter a name." );
        form.name.focus();
        return false; // Stop the form processing.
        }
    else{
        return true; //field ok move on.
        }
    }

else if (document.forms[0].phone){
    if ( !/^\w{10}$/.test( form.phone.value )) {  user
        form.name.style.border=""
        alert( "\nEnter a valid phone number!" );
        form.phone.focus();
        return false; // Stop the form processing.
        } 
    else{
        return true; //field ok move on.
        }
    }
else{
       return true; // Submit!
}

任何帮助都将不胜感激!

2 个答案:

答案 0 :(得分:1)

目前你正在检查(document.forms [0] .name)是否可用然后如果它已经死了它检查(document.forms [0] .phone)是否为真,然后......然后,如果没有,则转向'else'并返回true。使用if else意味着如果此部分失败,您只需要处理任何事情。

你可以试试。

if (document.forms[0].name) {
    if ( !/^\w{10}$/.test( form.phone.value )) {  user
        form.name.style.border=""
        alert( "\nEnter a valid phone number!" );
        form.phone.focus();
        return false; // Stop the form processing.
    } 
}
if (document.forms[0].blah) {
    do stuff...
    if fail
        return false;
}
return true;

由于该函数无论如何都将返回true,因此您无需在其他任何地方声明返回true(这也将使进程停止,因为它已returned并停止)。如果出现问题就停止这个过程的唯一原因..因此return false;

答案 1 :(得分:1)

如果您只需要验证表单,则现在不需要编写javascript。您可以使用html5 forms。即使您必须支持没有此功能的浏览器,也可以将webshims lib放在您的页面上以启用它。