A useful jquery form validation plug-in

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 );
},"输入格式不正确");

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>

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:

$('.lock-form-register').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标签
    }
});

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!