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

你可以试试这个例子JQuery Validation

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

你可以试试这个并进行相应的定制 | 演示

只需在验证函数中传递表单（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
}