如何通过一个功能实时验证诸如姓名，城市和州形式的多个元素？

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

您可以尝试此示例JQuery验证

Answer 2

在jquery文件之后的html页面中包含jquery验证文件

     $('#yourFormId').validate({
              rules:{
               name: {
                    required: true
                },
                city: {
                    required:true
                },
               state: {
                    required:true
                }
            },
            messages: {
                name:{
                    required: 'required msg' 
                },
  city:{
                    required: 'required msg' 
                },  state:{
                    required: 'required msg' 
                }

            },
            submitHandler: function(form){

            }
        });

希望这会起作用...

Answer 3

您可以尝试此操作并进行相应的自定义| 演示版

您只需要在validate函数中传递表单（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>

Java脚本

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
}