Home Web Front-end JS Tutorial A useful jquery form validation plug-in

A useful jquery form validation plug-in

Mar 09, 2018 am 11:34 AM
jquery form verify

This time I bring you a useful jquery form validation plug-in. What are the precautions when using the jquery form validation plug-in? The following is a practical case, let's take a look.

jquery's validate plug-in
Prerequisite knowledge: default validation rules

Usage: Introduce jquery.js, jquery.validate.min.js and validate-config.js in order
Example:

$.extend($.validator.messages, {    required: "这是必填字段",    ip: "输入格式不正确",    number: '请输入数字',    max: "输入超过了最大值",    min: "输入小于最小值",    minlength: $.validator.format( "输入字符不能少于 {0} 个." ),    maxlength: $.validator.format( "输入字符不能多于 {0} 个." ),    mask: "网关不可达",    remote: "该名称已存在",    equalTo: "两次输入密码不匹配",    notEqualTo: "新密码不能与原始密码相同",    pw  : "必须包含数字、英文字母、特殊字符, 并且大于等于8位"});
$.validator.addMethod("ip",function(value,element,params){    var ipReg = /^(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/;    if( value === '' ) {        return true;
    }    return ipReg.test( value );
},"输入格式不正确");
Copy after login

Lines 1 to 14 of the code are adding verification information. The code after line 16 is customizing the verification function. If the return value is false, the above is displayed. verify message.
The above code is the definition of validation rules, and the following code starts the verification:

<script src="xx/jquery.js"></script><script src="xx/jquery.validate.min.js"></script><script src="xx/validate-config.js"></script><script>
    var $form = $("#form");
    $form.validate( {        rules: {            id: {                required: true
            },            ip: {                required: true,                ip: true //这个不是写错,而是说明了要使用自定义($.validator.addMethod)的ip验证方法
            },            username: {                required: true
            },            pw: {                required: true
            }
        },        ignore: &#39;.ignore&#39;
    } );
    $form.on("submit", function () {      if ( $form.valid() ) { //$form.valid返回值为true验证通过
        //验证通过执行的代码
      }
    })</script>
Copy after login

Lines 6 to 23 explain which rules to use, line 25 It is an event listener for form submission.
Note: If you want to change the position of the verification information in the dom structure, use errorPlacement, as follows:

$(&#39;.lock-form-register&#39;).validate({    rules: {        username: {            required: true,            username: true

        },        password: {            required: true,            pw: true           
        },        confirmpwd : {            required : true,            equalTo : "#pw",             pw: true
        }
    },    errorPlacement: function(error, element) {        //element是被验证的元素,error是包含错误信息的label标签
    }
});
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related topics on the PHP Chinese website article!

Related reading:

A brief introduction to the principle of clearfix in CSS

Summary of common functions in JS

Detailed explanation of the box model of html

The above is the detailed content of A useful jquery form validation plug-in. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Detailed method to unblock using WeChat friend-assisted verification Detailed method to unblock using WeChat friend-assisted verification Mar 25, 2024 pm 01:26 PM

1. After opening WeChat, click the search icon, enter WeChat team, and click the service below to enter. 2. After entering, click the self-service tool option in the lower left corner. 3. After clicking, in the options above, click the option of unblocking/appealing for auxiliary verification.

New features in PHP 8: Added verification and signing New features in PHP 8: Added verification and signing Mar 27, 2024 am 08:21 AM

PHP8 is the latest version of PHP, bringing more convenience and functionality to programmers. This version has a special focus on security and performance, and one of the noteworthy new features is the addition of verification and signing capabilities. In this article, we'll take a closer look at these new features and their uses. Verification and signing are very important security concepts in computer science. They are often used to ensure that the data transmitted is complete and authentic. Verification and signatures become even more important when dealing with online transactions and sensitive information because if someone is able to tamper with the data, it could potentially

How to use PUT request method in jQuery? How to use PUT request method in jQuery? Feb 28, 2024 pm 03:12 PM

How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u

jQuery Tips: Quickly modify the text of all a tags on the page jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: &lt

Use jQuery to modify the text content of all a tags Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on ​​the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

Tips for using Laravel form classes: ways to improve efficiency Tips for using Laravel form classes: ways to improve efficiency Mar 11, 2024 pm 12:51 PM

Forms are an integral part of writing a website or application. Laravel, as a popular PHP framework, provides rich and powerful form classes, making form processing easier and more efficient. This article will introduce some tips on using Laravel form classes to help you improve development efficiency. The following explains in detail through specific code examples. Creating a form To create a form in Laravel, you first need to write the corresponding HTML form in the view. When working with forms, you can use Laravel

How to solve the problem of steam login stuck in mobile token verification? How to solve the problem of steam login stuck in mobile token verification? Mar 14, 2024 pm 07:35 PM

Steam is a platform used by game enthusiasts. You can buy and purchase many games here. However, recently many users have been stuck in the mobile token verification interface when logging into Steam and cannot log in successfully. Faced with this Most users don't know how to solve this situation. It doesn't matter. Today's software tutorial is here to answer the questions for users. Friends in need can check out the operation methods. Steam mobile token error? Solution 1: For software problems, first find the steam software settings on the mobile phone, request assistance page, and confirm that the network using the device is running normally, click OK again, click Send SMS, you can receive the verification code on the mobile phone page, and you are done. Verify, resolve when processing a request

How to tell if a jQuery element has a specific attribute? How to tell if a jQuery element has a specific attribute? Feb 29, 2024 am 09:03 AM

How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute

See all articles