Javascript Jquery:表单验证不起作用

我对Jquery非常陌生，希望你们能帮助我解决这个Jquery验证问题

我一直在尝试验证表单，但它根本无法验证。它接受我在字段中键入的任何内容，而不管我设置了什么限制

请帮忙。多谢各位

这是我的密码：

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/additional-methods.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

    <script type="text/javascript">
    $(function(){
    $('#form').validate({
    alert("bbbb");
    rules: {
        name: {
            required: true,
            minlength: 2,
            maxlength: 20,
            lettersonly: true
        },
        ssn: {
            required: true,
            minlength: 9,
            maxlength: 9,
            nowhitespace: true
        },
        gender: {
            required: true
        },
        mobile: {
            required: true,
            minlength: 10,
            maxlength: 13,
            digits: true
        },
        address: {
            required: true,
            minlength: 10,
        },
        email: {
            required: true,
            minlength: 6,
            email: true
        }
    },
    messages: {
        name: {
            required: "Please enter your name",
            minlength: "Name should be more than 2 characters",
            maxlength: "Name should be less than 20 characters",
            lettersonly: "Name should contain only letters"
            },
        ssn: {
            required: "Please enter your NRIC",
            minlength: "NRIC should be more than 9 characters",
            maxlength: "NRIC should be less than 9 characters",
            nowhitespace: "NRIC should not have any spaces"
            },
        gender: {
            required: "Please select your gender",
            },
        mobile: {
            required: "Please enter your mobile number",
            minlength: "Mobile number should be more than 10 characters",
            maxlength: "Mobile number should be less than 13 characters",
            digits: "Mobile number should contain only digits"
            },
        address: {
            required: "Please enter your address",
            minlength: "Address should be more than 10 characters",
            },
        email: {
            required: "Please enter your email address",
            minlength: "Password should be more than 6 characters",
            email: "Please enter a valid email address"
            }
    },
    });

    $("#submit").click(function(){
        $("#form").submit();
        return false;
        });

    });
    </script>

    <div id="form">
    <center>
    <form id="form">
    <div class="col-xs-12">
    <input type="text" name="name" id="name" placeholder="Name" required />
    </div>
    <div class="col-xs-12">
    <input type="text" name="nric" id="nric" placeholder="NRIC" required />
    </div>
    <div class="col-xs-12">
    <select class="dropdown" id="gender" onChange="changeColor(this)">
    <option value="" disabled selected>Gender</option>
    <option value="female">Female</option>
    <option value="male">Male</option>
    </select>
    </div>
    <div class="col-xs-12">
    <input type="text" name="mobile" id="mobile" placeholder="Mobile" required />
    </div>
    <div class="col-xs-12">
    <input type="text" name="address" id="address" placeholder="Address" required />
    </div>
    <div class="col-xs-12">
    <input type="email" name="email" id="email" placeholder="Email" required />
    </div>
    <input id="submit" class="button" type="submit" value="submit"/>
    </form>
</center>
</div>

$（函数（）{
$（“#表单”）。验证({
警报（“bbbb”）；
规则：{
姓名：{
要求：正确，
最小长度：2，
最大长度：20，
信一：真的
},
ssn：{
要求：正确，
最小长度：9，
最大长度：9，
nowhitespace：是的
},
性别：{
必填项：true
},
流动电话：{
要求：正确，
最小长度：10，
最大长度：13，
数字：真
},
地址:{
要求：正确，
最小长度：10，
},
电邮：{
要求：正确，
最小长度：6，
电子邮件：真的
}
},
信息：{
姓名：{
必填：“请输入您的姓名”，
minlength:“名称应超过2个字符”，
maxlength:“名称应少于20个字符”，
字母仅：“名称应仅包含字母”
},
ssn：{
必填：“请输入您的NRIC”，
minlength:“NRIC应超过9个字符”，
maxlength:“NRIC应少于9个字符”，
nowhitespace：“NRIC不应该有任何空间”
},
性别：{
必填：“请选择您的性别”，
},
流动电话：{
必填：“请输入您的手机号码”，
minlength：“手机号码应超过10个字符”，
maxlength:“手机号码应少于13个字符”，
数字：“手机号码应仅包含数字”
},
地址:{
必填：“请输入您的地址”，
minlength:“地址应超过10个字符”，
},
电邮：{
必填：“请输入您的电子邮件地址”，
minlength:“密码应超过6个字符”，
电子邮件：“请输入有效的电子邮件地址”
}
},
});
$（“#提交”）。单击（函数（）{
$（“#表格”）.submit（）；
返回false；
});
});
性别
女性
男性

您有两个元素具有

id=“form”

，因此验证器被分配给

div

而不是

表单

将
div的
id
值更改为其他值

另外，必须在
query.validate.js
之后添加
additional methods.js
文件，并且由于
validate
中的
alert（）
导致语法错误

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<div>
    <center>
        <form id="form">
            <div class="col-xs-12">
                <input type="text" name="name" id="name" placeholder="Name" required />
            </div>
            <div class="col-xs-12">
                <input type="text" name="nric" id="nric" placeholder="NRIC" required />
            </div>
            <div class="col-xs-12">
                <select class="dropdown" id="gender" onChange="changeColor(this)">
                    <option value="" disabled selected>Gender</option>
                    <option value="female">Female</option>
                    <option value="male">Male</option>
                </select>
            </div>
            <div class="col-xs-12">
                <input type="text" name="mobile" id="mobile" placeholder="Mobile" required />
            </div>
            <div class="col-xs-12">
                <input type="text" name="address" id="address" placeholder="Address" required />
            </div>
            <div class="col-xs-12">
                <input type="email" name="email" id="email" placeholder="Email" required />
            </div>
            <input id="submit" class="button" type="submit" value="submit"/>
        </form>
    </center>
</div>

演示：
嘿，您需要在库中创建自定义规则
像这样

$.validator.addMethod("valueNotEquals", function(value, element, arg){
  return arg != value;
}

然后让他们像这样使用它

    rules: {
        gender: {valueNotEquals: "default"}                                             
    },
    messages: {
        gender: { valueNotEquals: "Please select a payment method"}           

    }

什么是
警报（“bbbb”）在验证对象中执行此操作？请删除它，或者在
.validate（）
之前删除它。id属性不能有多个值相同的元素。正如karel所说，不能像这样将函数放在javascript对象中。您正在将javascript对象传递给validate函数
    rules: {
        gender: {valueNotEquals: "default"}                                             
    },
    messages: {
        gender: { valueNotEquals: "Please select a payment method"}           

    }