使用JavaScript进行表单验证

Question

我正在尝试使用JavaScript验证表单，但是在该字段旁边显示一条消息时说“此字段是必填字段”有点卡住了。 我该怎么做呢？ 抱歉，我刚接触JavaScript。 这是我的js代码：

var allFieldsRequired = true;
function specialPostcode(postalCode)
{
    var re = /^[TA]{2}([1-14]|22|15){1,2}/;
    if(re.test(postalCode))
    {
        alert("You have been entered into a competition to win special prize!!");
    }

}

function validatePostcode(postalCode)
{
    var re = /^[A-Z]{2}\d{1,2}\s\d{1}[A-Z]{2}$/;
    if(!re.test(postalCode))
    {
        alert('Postcode is not valid');
    }
    return re.test(postalCode);
}

function validateCard(promoCardNumber)
{
    var re = /^[A-Z]{1}([A-Z]|\d){4}\s?([A-Z]|\d){5}\s?([A-Z]|\d){3}\d{1}$/;
    if(!re.test(promoCardNumber))
    {
        alert('Promotional card number is not valid');
    }
    return re.test(promoCardNumber);
}

function validate(val)
{
    if(val == "")
    {
        return false;
    }
    else
    {
        return true;
    }
}

function verification(orderForm)
{
//set boolean flag
var valid = true;
if(allFieldsRequired)
{
    // validations
    if(valid)
    {
        valid = validatePostcode(orderForm.postalCode.value);
    }
    if(valid)
    {
        valid = validateCard(orderForm.promoCardNumber.value);
    }
    if(valid)
    {
        valid = validate(orderForm.firstName.value);
    }
    if(valid)
    {
        valid = validate(orderForm.surname.value);
    }
    if(valid)
    {
        valid = validate(orderForm.phoneNumber.value);
              }
    if(valid)
    {
        valid = validate(orderForm.streetName.value);
    }
    if(valid)
    {
        valid = validate(orderForm.city.value);
              }                                                          
    if(valid)
    {
        valid = validate(orderForm.billEmailAddress.value);
    }
    if(valid)
    {
        valid = validate(orderForm.billPhoneNumber.value);
    }
    if(valid)
    {
        valid = validate(orderForm.billCardNumber.value);
    }
    if(valid)
    {
        specialPostcode(orderForm.postalCode.value);
    }

}
else
{
    // validations
    if(valid)
    {
        valid = validatePostcode(orderForm.postalCode.value);
    }
    if(valid)
    {
        valid = validateCard(orderForm.promoCardNumber.value);
    }
    if(valid)
    {
        specialPostcode(orderForm.postalCode.value);
    }
}
return valid;
} // end of verification

这是我的表单的HTML代码：

<form id="orderForm" method="post" action="x">
            <table id="formTable" cellpadding="5">
                <tr>
                    <td>
                        <h3>Shipping and Billing Information</h3>
                    </td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>First Name</td>
                    <td><input id="firstname" type="text" name="firstName" maxlength="30" /></td>
                </tr>
                <tr>
                    <td>Surname</td>
                    <td><input id="surname" type="text" name="surname" maxlength="30" /></td>
                </tr>
                <tr>
                    <td>Contact Telephone Number</td>
                    <td><input id=phoneNumber" type="text" name="phoneNumber" maxlength="30" /></td>
                </tr>
                <tr>
                    <td>Street Name</td>
                    <td><input id="streetName" type="text" name="streetName" maxlength="30" /></td>
                </tr>
                <tr>
                    <td>City</td>
                    <td><input id="city" type="text" name="city" maxlength="30" /></td>
                </tr>
                <tr>
                    <td>Postal Code</td>
                    <td><input id="postalCode" type="text" name="postalCode" maxlength="30" /></td>
                </tr>
                <tr>
                    <td>Email address</td>
                    <td><input id="emailAddress" type="text" name="emailAddress" maxlength="30" /></td>
                </tr>
                <tr>
                    <td>Contact Telephone Number</td>
                    <td><input id="billPhoneNumber" type="text" name="billPhoneNumber" maxlength="30" /></td>
                </tr>
                <tr>
                    <td>Promotional card</td>
                    <td><input id="promoCardNumber" type="text" name="promoCardNumber" maxlength="30" /></td>
                </tr>
                <tr>
                    <td>Credit Card Number</td>
                    <td><input id="billCardNumber" type="text" name="billCardNumber" maxlength="30" /></td>
                </tr>
                <tr>
                    <td>Credit Card Type</td>
                    <td>
                        <select id="billCardType" name="billCardType">
                            <option value="...">
                                Choose your card...
                            </option>
                            <option value="visa">
                                Visa
                            </option>
                            <option value="mastercard">
                                Mastercard
                            </option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Instructions</td>
                    <td><textarea id="instructions" name="instructions" rows="8" cols="30">Enter your requirements here or comments.</textarea></td>
                </tr>
                <tr>
                    <td colspan="2"><input id="submit" type="submit" name="Submit" value="Submit" onclick="return verification(document.getElementById('orderForm'));" /></td>
                </tr>
            </table>
        </form>

Answer 1

在每个字段附近添加一个跨度，以便将其用于验证消息：

<td>First Name</td>
<td>
  <input id="firstname" type="text" name="firstName" maxlength="30" />
  <span id="firstname_error"/>
</td>

之后，只需在此处添加错误消息，而不是：

alert('You need to complete this field')

您将使用：

document.getElementById('firstname_error').innerHTML = 'You need to complete this field'

Answer 2

最简单的方法是在输入字段下方放置一个隐藏的span标签，如下所示

<input .... /> <br />
<span id="fieldname" style="display: none;">This field is required</span>

在Javascript中，您可以执行此操作

if(!valid)
{
  document.getElementById("fieldname").style = "block";
}

Answer 3

我看了一下jQuery代码。 对于一些相对简单的验证，看起来像几千行代码。 我不建议使用该插件进行一些简单的验证-这太过分了。

Answer 4

我认为您需要查看http://www.w3schools.com/js/js_form_validation.asp来进行验证，然后使用此处的想法来显示消息。

Answer 5

您验证表单字段的方式绝对是可怕的，很多未经修饰且肿的代码根本没有进行优化。

我强烈建议您使用某种现成的FormValidation脚本，或者看看这个jQuery插件
使用jQuery，您的代码可以如下所示（此外，您还将获得显示在字段旁边的消息）：

$("#signupForm").validate({
    rules: {
        firstname: "required",
        lastname: "required",
        username: {
            required: true,
            minlength: 2
        },
        password: {
            required: true,
            minlength: 5
        },
        confirm_password: {
            required: true,
            minlength: 5,
            equalTo: "#password"
        },
        email: {
            required: true,
            email: true
        }
    }
})