Web site development and common plug jQuery summary (four) validation plugin for

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

In the development of website, if sometimes we need to validate user input information to meet our requirements, so we will users to submit data to verify. Validation was performed in two times, once on the client, once in the server. Client-side validation can enhance the user experience.

There are a lot of jQuery authentication plugin, functions are basically the same. This is jQuery authentication plug in a jquery.validate

1.jquery.validateThe plugin function

Simple realization of client information verification, do not meet the requirements of the information filtering

2.jquery.validateThe official address

The official address:, with detailed instructions for plugins

The official demo:

3.jquery.validateMethod of use

1.Reference JS

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

2.css style , can be customized, just need to add error style, can also be used in the official demo style.

.error{
    color:red;
    margin-left:8px;
}

3.jsCode

$(document).ready(function() {
    // validate signup form on keyup and submit
    var validator = $("#signupform").validate({
        rules: {
            firstname: "required",
            username: {
                required: true,
                minlength: 2
            },
            password: {
                required: true,
                minlength: 5
            },
            password_confirm: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            email: {
                required: true,
                email: true,
            },
            dateformat: "required",
            terms: "required"
        },
        messages: {
            firstname: "The name cannot be empty",
            username: {
                required: "The user name cannot be empty",
                minlength: jQuery.format("The user name only less by {0} characters")
            },
            password: {
                required: "Password can not be empty",
                minlength: jQuery.format("Only a few of the password of {0} characters")
            },
            password_confirm: {
                required: "Confirm the password can not be empty",
                minlength: jQuery.format("Confirm password only consists of {0} character"),
                equalTo: "The secret and the confirmation password do not match"
            },
            email: {
                required: "Mailbox cannot be empty",
                email: "The mailbox is not in the correct format"
            },
            dateformat: "Please choose gender",
            terms: " "
        },
        // the errorPlacement has to take the table layout into account
        errorPlacement: function(error, element) {
            if ( element.is(":radio") )
                error.appendTo( element.parent().next().next());
            else if ( element.is(":checkbox") )
                error.appendTo ( element.next());
            else
                error.appendTo( element.parent().next());
        },
        // specifying a submitHandler prevents the default submit, good for the demo
        submitHandler: function() {
            alert("submitted!");
        },
        // set this class to error-labels to indicate valid fields
        success: function(label) {
            // set &nbsp; as text for IE
            label.html("&nbsp;").addClass("checked");
        },
        highlight: function(element, errorClass) {
            $(element).parent().next().find("." + errorClass).removeClass("checked");
        }
    });
});

The above code using only the methods and properties of plugins provide. You can also customize the verification method. Such as

$.validator.addMethod("checkUserName", function(value) {

//Value for the validation of the value, corresponding to the element ID

//Method code

}, 'The user name is not in the correct format');

Use a custom method is also very simple, need only ID element:”checkUserName”

4.The use of HTML

<form id="signupform" autocomplete="off" method="get" action="">
      <table>
      <tr>
        <td class="label"><label id="lfirstname" for="firstname">Full name</label></td>
        <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
        <td class="status"></td>
      </tr>
      <tr>
        <td class="label"><label id="lusername" for="username">User name</label></td>
        <td class="field"><input id="username" name="username" type="text" value="" maxlength="50" /></td>
        <td class="status"></td>
      </tr>
      <tr>
        <td class="label"><label id="lpassword" for="password">Cipher</label></td>
        <td class="field"><input id="password" name="password" type="password" maxlength="50" value="" /></td>
        <td class="status"></td>
      </tr>
      <tr>
        <td class="label"><label id="lpassword_confirm" for="password_confirm">Confirm password</label></td>
        <td class="field"><input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" /></td>
        <td class="status"></td>
      </tr>
      <tr>
        <td class="label"><label id="lemail" for="email">The mailbox</label></td>
        <td class="field"><input id="email" name="email" type="text" value="" maxlength="150" /></td>
        <td class="status"></td>
      </tr>
                  <tr>
        <td class="label"><label>Gender</label></td>
        <td class="field" colspan="2" style="vertical-align: top; padding-top: 2px;">
        <table>
        <tbody>

        <tr>
            <td style="padding-right: 5px;">
                <input id="sex_men" name="dateformat" type="radio" value="0" />
                <label id="lbl_sex_men" for="dateformat_eu">Male</label>
            </td>
            <td style="padding-left: 5px;">
                <input id="sex_women" name="dateformat" type="radio" value="1"  />
                <label id="lbl_sex_women" for="dateformat_am">Female</label>
            </td>
            <td>
            </td>
        </tr>
        </tbody>
        </table>
        </td>
      </tr>

      <tr>
        <td class="label">&nbsp;</td>
        <td class="field" colspan="2">
            <div id="termswrap">
                <input id="terms" type="checkbox" name="terms" />
                <label id="lterms" for="terms">To read and agree to the terms of the website.</label>
            </div> <!-- /termswrap -->
        </td>
      </tr>
      <tr>
        <td class="label"></td>
        <td class="field" colspan="2">
        <input id="signupsubmit" name="signup" type="submit" value="Registration" />
        </td>
      </tr>

      </table>
</form>

Effect of presentation: validation plugin validate test

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Mortimer at November 15, 2013 - 9:27 PM