jquery - 使用 jquery 插件验证成功后如何在文本框旁边显示符号

Question

我有以下代码来执行下面显示的 SubmitForm 验证，单击按钮表单将被正确验证，它将文本框更改为红色并显示带有某些符号的错误消息。但问题是我将如何显示一些其他符号，例如右刻度符号或用户在文本框中输入正确详细信息时的一些文本消息我正在使用以下插件进行验证 http://jquery.bassistance.de/validate/jquery.validate.js

Example.html

<fieldset id="fieldset1">
    <legend>Registration Details:</legend>
    <form id="SubmitForm">
        Name of business:<br/>
        <input size="30" type="text" id="businessname" class="required" name="businessname"/><br/>               
        Zipcode:<br>
        <input size="30" type="text" id="zipcode"  class="required zipcode" name="zipcode"/><br>              
        Telephone:<br/>
        <input size="30" type="text" id="telephone"  class="required phone"  name="telephone"/><br/>
        Email:<br/>
        <input size="30" type="text" id="email"  class="required email" name="email"/>
</fieldset>
<br/>
Your email is your User Name:<br/>
<input size="30" type="text" id="username" class="required" name="email"/><br/>
Choose Password:<br/>
<input size="30" type="text" id="pass" class="required password" class="required" name="password"/><br/>
Retype Password:<br/>
<input size="30" type="text" id="pass1" equalTo="#pass"/><br/>               
<input id="Addresslisting" type="image" src="images/Submit.png" align="left"  />                                
</form>  
</feildset>

示例.js

$(document).ready(function () {
    $("#Addresslisting").click(function () {
        $("#SubmitForm").validate();
    });
});

示例.css

label {
    width: 10em;
    float: left;
}

label.error {
    color: red;
    padding: 8px 200px 0px 0px;
    vertical-align: top;
    float: right;
    background: url("unchecked.gif") no-repeat 120px 0px;
}

input.error {
    border: 1px solid red;
}

input.errorlist {
    margin: 0;
    color: red;
    margin-bottom: 10px;
}

#fieldset1 {
    border: 1px solid #1f76c8;
    width: 500px;
    margin: 5px;
    padding: 10px 15px 5px 15px;
}   

Answer 1

你可以像这样使用成功，

    .validate({         
         success: function(label) {
             label.text("ok!").addClass("success"); 
             // will add a <label class="success">ok!</label>
             // I'm assuming, errorElement: "label"
         },
        rules: {
            number: {
                required:true,
                minLength:3,
                maxLength:15,
                number:true 
            }

        }
    });

可以看到here .