使用javascript验证html中的输入文本字段

Question

<script type='text/javascript'>   
function required()  
{
    var empt = document.forms["form1"]["Name"].value; 
    if (empt == "")  
    {  
        alert("Please input a Value");  
        return false;  
    }  
}  
</script> 

<form name="form1" method="" action="">
<input type="text" name="name" value="Name"/><br />
<input type="text" name="address line1" value="Address Line 1"/><br />

我有多个输入文本字段，每个字段都有自己的默认值。在提交表单之前，我必须验证是否已填写所有字段。到目前为止，由于不同的文本框具有不同的默认值，我让 javascript 来检查 null。如何编写 javascript 来验证用户是否已输入数据？我的意思是，脚本必须确定输入数据不是默认值和空值。

Answer 1

如果您不使用 jQuery，那么我将简单地编写一个验证方法，您可以在提交表单时触发该方法。该方法可以验证文本字段以确保它们不是空的或默认值。该方法将返回一个 bool 值，如果它为 false，您可以触发警报并分配类以突出显示未通过验证的字段。

HTML：

<form name="form1" method="" action="" onsubmit="return validateForm(this)">
<input type="text" name="name" value="Name"/><br />
<input type="text" name="addressLine01" value="Address Line 1"/><br />
<input type="submit"/>
</form>

JavaScript：

function validateForm(form) {

    var nameField = form.name;
    var addressLine01 = form.addressLine01;

    if (isNotEmpty(nameField)) {
        if(isNotEmpty(addressLine01)) {
            return true;
        {
    {
    return false;
}

function isNotEmpty(field) {

    var fieldData = field.value;

    if (fieldData.length == 0 || fieldData == "" || fieldData == fieldData) {

        field.className = "FieldError"; //Classs to highlight error
        alert("Please correct the errors in order to continue.");
        return false;
    } else {

        field.className = "FieldOk"; //Resets field back to default
        return true; //Submits form
    }
}

validateForm 方法分配要验证的元素，然后在这种情况下调用 isNotEmpty 方法来验证该字段是否为空或未更改默认值。它不断调用 inNotEmpty 方法，直到它返回 true 值，或者如果该字段的条件失败，它将返回 false。

试一试，让我知道它是否有帮助或您有任何问题。当然，您可以编写其他自定义方法来仅验证数字、电子邮件地址、有效 URL 等。

如果您完全使用 jQuery，我会考虑试用 jQuery 验证插件。我一直在我最近的几个项目中使用它，它非常好。有机会的话就去看看吧。http://docs.jquery.com/Plugins/Validation