javascript - 如何通过一个函数实时验证表单中的多个元素(例如名称、城市和州)？

Question

我想在 javascript 中创建一个通用函数来验证我的字段，如名称、城市和州。这也适用于所有三个领域1) 姓名2) 城市3)状态

这是html代码

<form name="addcust" method="POST" action="insrtCustomer.php" id="form1">
<table>
    <tr>
            <td>Customer Name</td>
            <td><input type="text" name="name" id="name"><label id="message"></label></td>
            <td>City</td><td><input type="text" name="city" maxlength="25"></td>
    </tr>
    <tr>
            <td>State</td><td><input type="text" name="state" maxlength="25"></td>
    </tr>
</table>

我想创建一个函数，我可以使用它进行实时验证，并且可以适用于多种表单。众所周知，网站中的所有表单都有不同的名称。那么如何使用它，请在这里给出您的想法，你们都知道这对其他人也很有用。所以请帮忙

Answer 1

你可以尝试这个并进行相应的定制| <强> Demo

只需在验证函数中传递表单(this)，它会检查所有文本框是否为空，您可以根据您的用途进行修改

<form name="addcust" method="POST" action="insrtCustomer.php" id="form1" onsubmit="return validate(this)">
<table>
    <tr>
            <td>Customer Name</td>
            <td><input type="text" name="name" id="name"><label id="message"></label></td>
            <td>City</td><td><input type="text" name="city" maxlength="25"></td>
    </tr>
    <tr>
            <td>State</td><td><input type="text" name="state" maxlength="25"></td>
    </tr>
</table>
                <input type="submit" value="submit">
                </form>

Javascript

function validate(dis)
{
    var ele = dis.getElementsByTagName("input");
    for(var i=0;i<ele.length;i++)
    {
         if(ele[i].getAttribute("type") == "text")
         {
                if(ele[i].value == "")
                {
                    alert(ele[i].getAttribute('name')+" is required feild");
                    ele[i].focus();
                    return false;
                }
         }

        // you can check for radio and checkboxes
        //eg :  if(ele[i].getAttribute("type") == "radio")
        // {
                // Your code here     
        // }
    }

 return true; // to prevent from form submission use false
}

如果你想检查特殊字符

function validate(dis)
{
    var filter = /^[A-Za-z0-9]+$/;
    var ele = dis.getElementsByTagName("input");
    for(var i=0;i<ele.length;i++)
    {
         if(ele[i].getAttribute("type") == "text")
         {
                if(ele[i].value == "")
                {
                    alert(ele[i].getAttribute('name')+" is required feild");
                    ele[i].focus();
                    return false;
                }
                else if(!filter.test(ele[i].value))
                {
                    alert(ele[i].getAttribute('name')+" requires letters and numbers only");
                    ele[i].focus();
                    return false;
                }else;
         }

        // you can check for radio and checkboxes
        //eg :  if(ele[i].getAttribute("type") == "radio")
        // {
                // Your code here     
        // }
    }

 return true; // to prevent from form submission use false
}