javascript：表单长度验证

我觉得，我的javascript验证问题。它仍然会在表单无效时提交。具体来说，当用户输入的字符长度超过10个字符时，它仍然会将表单提交到数据库中，同时它应该显示警报。这里的脚本：javascript：表单长度验证

<script type="text/javascript"> 
function validateForm() 
{ 
var numericExpression = /^[0-9]+$/; 
var a=document.forms["purchaseform"]["no"].value; 
var b=document.forms["purchaseform"]["qty"].value; 
if (a==null || a=="") 
    { 
    alert("Form number must be filled out"); 
    return false; 
    } 
if(a.match(numericExpression)) 
    { 
    return true; 
    } 
    else 
    { 
    alert("Form number must be filled with numbers only"); 
    return false; 
    } 
if(a.length > 10) //i got a problem with this one i think 
    { 
    alert("Form number must not be greater than 10 character length"); 
    return false; 
    } 
if (b==null || b=="") 
    { 
    alert("Quantity must be filled out"); 
    return false; 
    } 
if(b.match(numericExpression)) 
    { 
    return true; 
    } 
    else 
    { 
    alert("Quantity must be filled with numbers only"); 
    return false; 
    } 
} 
</script>

这里是表单代码：

<form name="purchaseform" method="post" onsubmit="return validateForm()" action="submitpurchaseadmin.php"> 
<table> 
    <tr> 
     <td>Form number</td> 
     <td><input type="text" name="no"></td> 
    </tr> 
    <tr> 
     <td>Category</td> 
     <td> 
     <select id="cat" name="cat"> 
     </select> 
     </td> 
    </tr> 
    <tr> 
     <td>Item</td> 
     <td> 
     <select id="item" name="item"> 
     </select> 
     </td> 
    </tr> 
    <tr> 
     <td>Quantity</td> 
     <td><input type="text" name="qty"></td> 
    </tr> 
    <tr> 
     <td>Date</td> 
     <td><input type="text" name="date" value="<?php echo date("d-m-Y"); ?>"></td> 
    </tr> 
    <tr> 
     <td colspan="2" align="center"><input type="submit" name="submit" value="Save"></td> 
    </tr> 
</table> 
</form>

来源

2013-12-16 Rendy Setiadi

'console.log（a）'显示什么？ –

使用document.write语法？ –

http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it –

添加ID这些投入和做

function validateForm() { 
    var a = document.getElementById("no").value; 
    var b = document.getElementById("qty").value; 

    if (!a.length) { 
     alert("Form number must be filled out"); 
     return false; 
    }else if (!a.match(/^[0-9]+$/)) { 
     alert("Form number must be filled with numbers only"); 
     return false; 
    }else if (a.length > 10) { 
     alert("Form number must not be greater than 10 character length"); 
     return false; 
    }else if (!b.length) { 
     alert("Quantity must be filled out"); 
     return false; 
    }else if (!b.match(/^[0-9]+$/)) { 
     alert("Quantity must be filled with numbers only"); 
     return false; 
    } 
}

FIDDLE

来源

2013-12-16 02:26:53 adeneo

谢谢，它验证正确。请问使用var a = document.forms [“purchaseform”] [“no”] .value有什么区别？和var a = document.getElementById（“no”）.value ;? –

使用全局命名空间来访问元素对我来说似乎是一个坏主意，但这不是真正的问题所在，问题在于if/else的设置方式，尤其是匹配数字正则表达式时，正如Leo所指出的，if（match（regex））else {...'总是从函数返回，所以它的其余部分永远不会执行。 – adeneo