Jquery 如何验证单选按钮并将字母数字属性添加到文本框？_Jquery_Jquery Validate

Jquery 如何验证单选按钮并将字母数字属性添加到文本框？

jquery

Jquery 如何验证单选按钮并将字母数字属性添加到文本框？,jquery,jquery-validate,Jquery,Jquery Validate,我尝试了以下代码来验证单选按钮： <html> <head> <script src="jquery-1.8.3.js" type="text/javascript"> </script> <script src="jquery.validate.js" type="text/javascript"> </script> <script> $(document).ready(function(){ $("#myf

我尝试了以下代码来验证单选按钮：

<html>
<head>
<script src="jquery-1.8.3.js" type="text/javascript">
</script>
<script src="jquery.validate.js" type="text/javascript">
</script>
<script>
$(document).ready(function(){
$("#myform").validate({
rules:{
username:{
required:true,
alphanumeric:true
}
gender:"required",
},
messages:{
username:
{
required:"username cannot be empty",
alphanumeric:"username needs to be alphanumeric"
}
gender:{
required:"specify this field",
}
}
});
});


</script>
<style type="text/css">


label.error
{
color:red;
padding-left:.5em;
}
</style>

</head>
<body>
<form id="myform" action="r.html">
<table>

<tr>
<td><label for="username">Username<em>*</em>:</td></label><td><input type="text"           id="username" name="username"/></td>
</tr>

<tr>
<td><label for="gender" validate="required:true" class="required">Gender<em>*</em>:      </label></td><td><input type="radio" id="gender" name="gender" value="male"/>Male</td>
</tr>
<tr>
<td></td><td><input type="radio" id="gender" name="gender" value="female"/>Female</td>
</tr>

<tr>
<td></td>
<td><input type="submit" value="submit" id="submit"/></td>
</tr>
</table>
</form>
</body>
</html>


$（文档）.ready（函数（）{
$（“#myform”）。验证({
规则：{
用户名：{
要求：正确，
字母数字：真
}
性别：“必需”，
},
信息：{
用户名：
{
必需：“用户名不能为空”，
字母数字：“用户名必须是字母数字”
}
性别：{
必需：“指定此字段”，
}
}
});
});
标签错误
{
颜色：红色；
左侧填充：.5em；
}
用户名*：
性别*：男
女性

当我尝试此代码时，正在验证性别字段，但在性别和男性属性之间出现错误消息。但它必须在男性属性之后出现

0.5em

字母数字验证根本不起作用。请有人帮帮我。

提前谢谢

你有很多错误

就像，这不是规则的典型语法

gender:"required",

它应该是

required:true

并且在

规则中：{}

如下所示

rules: {
    username: {
        required: true,
        alphanumeric: true
    },
    gender: {
        required: true
    }
},

在您的HTML中

<label for="gender" validate="required:true" class="required">Gender<em>*</em>:</label>

要使用字母数字规则，还需要包括“附加方法”文件：

或缩小：

这里的HTML无效。请注意

是如何包装在

外部的

<td><label for="username">Username<em>*</em>:</td></label>

HTML:

$("#myform").validate({

    // your rules and options,

    errorPlacement: function (error, element) {
        if (element.is('input[type="text"]')) {
            error.insertAfter(element); // placement of errors on text fields
        } else if (element.is('input[type="radio"]')) {
            element.next('.radio-message').html(error);  // placement of errors on radio buttons
        } else {
            error.insertAfter(element);  // default placement
        }
    }
});

<input type="radio" id="gender" name="gender" value="male" />Male <span class="radio-message"></span>

男性

工作演示：

$("#myform").validate({

    // your rules and options,

    errorPlacement: function (error, element) {
        if (element.is('input[type="text"]')) {
            error.insertAfter(element); // placement of errors on text fields
        } else if (element.is('input[type="radio"]')) {
            element.next('.radio-message').html(error);  // placement of errors on radio buttons
        } else {
            error.insertAfter(element);  // default placement
        }
    }
});

<input type="radio" id="gender" name="gender" value="male" />Male <span class="radio-message"></span>

您还缺少一个逗号（will中断代码），并且有一些额外的逗号（可能会中断IE中的代码）

同样，，当您遵循正确的代码缩进和格式时，更容易看到这些错误。我强烈建议您这次采纳我的建议。你将成为一名更好的程序员，你的代码将更容易阅读，你的HTML将更有效，你的JavaScript将更容易排除故障

插件文档：

$("#myform").validate({

    // your rules and options,

    errorPlacement: function (error, element) {
        if (element.is('input[type="text"]')) {
            error.insertAfter(element); // placement of errors on text fields
        } else if (element.is('input[type="radio"]')) {
            element.next('.radio-message').html(error);  // placement of errors on radio buttons
        } else {
            error.insertAfter(element);  // default placement
        }
    }
});

<input type="radio" id="gender" name="gender" value="male" />Male <span class="radio-message"></span>