使用javascript验证html中的输入文本字段 [英] validation of input text field in html using javascript

问题描述

<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来验证用户是否输入了数据？我的意思是，脚本必须识别输入数据不是默认值并且为null。

I have more than one input text field, each having their default value. Before I submit the form I have to verify whether all fields are filled. So far i got the javascript to check for null since different text boxes have different default value. How can I write a javascript to verify that user has entered data? I mean, the script must identify that input data is other than default and null.

推荐答案

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

If you are not using jQuery then I would simply write a validation method that you can be fired when the form is submitted. The method can validate the text fields to make sure that they are not empty or the default value. The method will return a bool value and if it is false you can fire off your alert and assign classes to highlight the fields that did not pass validation.

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：

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。

The validateForm method assigns the elements you want to validate and then in this case calls the isNotEmpty method to validate if the field is empty or has not been changed from the default value. it continuously calls the inNotEmpty method until it returns a value of true or if the conditional fails for that field it will return false.

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

Give this a shot and let me know if it helps or if you have any questions. of course you can write additional custom methods to validate numbers only, email address, valid URL, etc.

如果您使用jQuery，我会考虑尝试jQuery验证插件。我一直在使用它来完成我的最后几个项目，这非常好。如果你有机会检查一下。 http://docs.jquery.com/Plugins/Validation

If you use jQuery at all I would look into trying out the jQuery Validation plug-in. I have been using it for my last few projects and it is pretty nice. Check it out if you get a chance. http://docs.jquery.com/Plugins/Validation

这篇关于使用javascript验证html中的输入文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！