0

我试过这段代码来验证单选按钮：

<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>

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

并且字母数字验证根本不起作用。请有人帮帮我。提前致谢。

4

1 回答 1

0

你有很多错误......

就像在您的其他问题中一样，这不是规则的典型语法......

gender:"required",

它应该required: true和你的内心rules: {}一样...

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

在您的 HTML 中...

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

validate="required:true"完全是多余的，应该删除。

  • 这是毫无意义的，因为它是完全捏造的attribute。
  • 它应用于label而不是input.

class="required"不仅是多余的，因为它应用于 alabel而不是input元素，而且完全是多余的，因为您已经在.validate()选项中指定了规则。

使用 jQuery 中定义的规则，HTML 将是：

<label for="gender">Gender<em>*</em>:</label>

要使用该alphanumeric规则，您还需要在此处包含“其他方法”文件：

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.js

或缩小：

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.min.js

您的 HTML 无效。请注意如何</label>在</td>...

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

应该：

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

至于放置您的错误，我不会首先使用 atable来布置表单。尽管如此，您可以使用内置errorPlacement:方法放置错误消息。 error.insertAfter(element)是默认功能。

使用条件来测试的类型input将允许您更改单选按钮的此功能。您可以调整下面的代码以根据需要放置您的消息。

jQuery.validate()方法：

$("#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
        }
    }
});

HTML：

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

工作演示：

http://jsfiddle.net/kP4Xy/

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

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

插件文档：

http://docs.jquery.com/Plugins/Validation

于 2013-01-06T16:39:11.617 回答