jQuery Validate

jQuery Validate

Import js library (CDN recommended using w3cschool online tutorial)

<script src="http://libs.cdnjs.net/jquery/2.2.1/jquery.js" rel="external nofollow"  rel="external nofollow" ></script>
<script src="http://libs.cdnjs.net/jquery-validate/1.14.0/jquery.validate.min.js" rel="external nofollow"  rel="external nofollow" ></script>

The default check rule

The default prompt

messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date ( ISO ).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    maxlength: $.validator.format( "Please enter no more than {0} characters." ),
    minlength: $.validator.format( "Please enter at least {0} characters." ),
    rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
    range: $.validator.format( "Please enter a value between {0} and {1}." ),
    max: $.validator.format( "Please enter a value less than or equal to {0}." ),
    min: $.validator.format( "Please enter a value greater than or equal to {0}." )
}

jQuery Validate provides Chinese information tip pack at the /localization/messages_zh.js package, as follows:

(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        define( ["jquery", "../jquery.validate"], factory );
    } else {
        factory( jQuery );
    }
}(function( $ ) {

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
 */
$.extend($.validator.messages, {
    required: "这是必填字段",
    remote: "请修正此字段",
    email: "请输入有效的电子邮件地址",
    url: "请输入有效的网址",
    date: "请输入有效的日期",
    dateISO: "请输入有效的日期 (YYYY-MM-DD)",
    number: "请输入有效的数字",
    digits: "只能输入数字",
    creditcard: "请输入有效的信用卡号码",
    equalTo: "你的输入不相同",
    extension: "请输入有效的后缀",
    maxlength: $.validator.format("最多可以输入 {0} 个字符"),
    minlength: $.validator.format("最少要输入 {0} 个字符"),
    rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
    range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
    max: $.validator.format("请输入不大于 {0} 的数值"),
    min: $.validator.format("请输入不小于 {0} 的数值")
});

}));

You can introduce the localized information file /localization/messages_zh.js to the page:

<script src="http://libs.cdnjs.net/jquery-validate/1.14.0/localization/messages_zh.js" rel="external nofollow"  rel="external nofollow" ></script>

How to use it

1, the check rules are written to the control

<script src="http://libs.cdnjs.net/jquery/2.2.1/jquery.js" rel="external nofollow"  rel="external nofollow" ></script>
<script src="http://libs.cdnjs.net/jquery-validate/1.14.0/jquery.validate.min.js" rel="external nofollow"  rel="external nofollow" ></script>
<script src="http://libs.cdnjs.net/jquery-validate/1.14.0/localization/messages_zh.js" rel="external nofollow"  rel="external nofollow" ></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
    $("#commentForm").validate();
});
</script>

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>输入您的名字，邮箱，URL，备注。</legend>
    <p>
      <label for="cname">Name (必需, 最小两个字母)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (必需)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (可选)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">备注 (必需)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>

Try it out . . .

2, the check rules are written to the js code

$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "请输入您的名字",
      lastname: "请输入您的姓氏",
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字母组成"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母",
        equalTo: "两次密码输入不一致"
      },
      email: "请输入一个正确的邮箱",
      agree: "请接受我们的声明",
      topic: "请选择两个主题"
     }
    })
});

At messages, if a control does not have message, the default information is called

<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>验证完整的表单</legend>
    <p>
      <label for="firstname">名字</label>
      <input id="firstname" name="firstname" type="text">
    </p>
    <p>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" type="text">
    </p>
    <p>
      <label for="username">用户名</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="password">密码</label>
      <input id="password" name="password" type="password">
    </p>
    <p>
      <label for="confirm_password">验证密码</label>
      <input id="confirm_password" name="confirm_password" type="password">
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
    </p>
    <p>
      <label for="agree">请同意我们的声明</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
    <p>
      <label for="newsletter">我乐意接收新信息</label>
      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
    </p>
    <fieldset id="newsletter_topics">
      <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
      <label for="topic_marketflash">
        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">Marketflash
      </label>
      <label for="topic_fuzz">
        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Latest fuzz
      </label>
      <label for="topic_digester">
        <input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing list digester
      </label>
      <label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
    </fieldset>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>

Try it out . . .

Needed: True values are required.
Needed: The value #aa "Checked" expression is true and needs to be verified.
Required: function() is returned as true, indicating that verification is required.

The back two are commonly used, and elements in the form that need to be filled in or not filled in at the same time.

Common methods and attention to problems

1. Replace the default SUBMIT by other means

$().ready(function() {
 $("#signupForm").validate({
        submitHandler:function(form){
            alert("提交事件!");   
            form.submit();
        }    
    });
});

Use the ajax method

$(".selector").validate({     
 submitHandler: function(form) 
   {      
      $(form).ajaxSubmit();     
   }  
 }) 

You can set the default value for validate, as follows:

$.validator.setDefaults({
  submitHandler: function(form) { alert("提交事件!");form.submit(); }
});

If you want to submit a form, you need to use form.submit() instead of $(form.submit().

2, debug, only verify not to submit the form

If this parameter is true, the form is not submitted, only checked, and debugging is convenient.

$().ready(function() {
 $("#signupForm").validate({
        debug:true
    });
});

If there are multiple forms on a page that want to be set up as debugs, use:

$.validator.setDefaults({
   debug: true
})

3, ignore: ignore some elements do not validate

ignore: ".ignore"

4. Change where the error message is displayed

errorPlacement：Callback

Indicates the location of the wrong placement, the default is: error.appendTo (element.parent()); That is, put the error message after the validated element.

errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  
}

Instance

<p>将错误信息放在 label 元素后并使用 span 元素包裹它</p>

<form method="get" class="cmxform" id="form1" action="">
  <fieldset>
    <legend>Login Form</legend>
    <p>
      <label for="user">Username</label>
      <input id="user" name="user" required minlength="3">
    </p>
    <p>
      <label for="password">Password</label>
      <input id="password" type="password" maxlength="12" name="password" required minlength="5">
    </p>
    <p>
      <input class="submit" type="submit" value="Login">
    </p>
  </fieldset>
</form>

Try it out . . .

The effect of the code is to generally display the error message in the "status" of the slt;td class, or in the case of radio, in the case of the radio, in the case of the checkbox, in the case of the content.

Typically, these three properties are used at the same time, implementing the ability to display all error prompts in a container and automatically hide them when there is no information.

errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"

5, change the style of the error message display

By styled the error prompt, you can add an icon display, and a validation .css has been established in the system to maintain the style of the check file.

input.error { border: 1px solid red; }
label.error {
  background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;

  padding-left: 16px;

  padding-bottom: 2px;

  font-weight: bold;

  color: #EA5200;
}
label.checked {
  background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}

6, each field validation through the execution function

The action of the element to be validated, if followed by a string, is treated as a css class, or with a function.

success: function(label) {
    // set   as text for IE
    label.html(" ").addClass("checked");
    //label.addClass("valid").text("Ok!")
}

Add "valid" to the validation element, the style defined in CSS.

success: "valid"

7, verification of the trigger method modification

Although the following is boolean type, it is recommended that you do not add it indiscriminately unless you want to change it to false.

// 重置表单
$().ready(function() {
 var validator = $("#signupForm").validate({
        submitHandler:function(form){
            alert("submitted");   
            form.submit();
        }    
    });
    $("#reset").click(function() {
        validator.resetForm();
    });

});

8, asynchronous verification

remote：URL

Using ajax for validation, the currently validated value is submitted to the remote address by default, and the data option is available if additional values need to be submitted.

remote: "check-email.php"

remote: {
    url: "check-email.php",     //后台处理程序
    type: "post",               //数据发送方式
    dataType: "json",           //接受数据格式   
    data: {                     //要传递的数据
        username: function() {
            return $("#username").val();
        }
    }
}

    

Remote addresses can only output "true" or "false" and cannot have other output.

9, add custom checks

addMethod：name, method, message

Custom validation methods

// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
    var length = value.length;
    for(var i = 0; i < value.length; i++){
        if(value.charCodeAt(i) > 127){
            length++;
        }
    }
  return this.optional(element) || ( length >= param[0] && length <= param[1] );   
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));

// 邮政编码验证   
jQuery.validator.addMethod("isZipCode", function(value, element) {   
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");

Note: To add in .js file or in the jquery.validate .js file. It is recommended that you generally write in the additional-.js file.

Note: Add messages_cn.js file: isZipCode: "Only Chinese, english letters, numbers, and underscores." Add a reference to the .js file before calling.

10, radio and checkbox, select verification

Radio's required means that one must be selected.

<input  type="radio" id="gender_male" value="m" name="gender" required />
<input  type="radio" id="gender_female" value="f" name="gender"/>

The required of the checkbox means that it must be selected.

<input type="checkbox" class="checkbox" id="agree" name="agree" required />

The minlength of the checkbox represents the minimum number that must be selected, maxlength represents the maximum number of selected numbers, and rangelength: .2,3) indicates the number interval that must be selected.

<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" required minlength="2" />
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />

Select's required means that the value selected cannot be empty.

<select id="jungle" name="jungle" title="Please select something!" required>
    <option value=""></option>
    <option value="1">Buga</option>
    <option value="2">Baga</option>
    <option value="3">Oi</option>
</select>

Select's minlength represents the minimum number selected (multi-select), maxlength represents the maximum number of selected numbers, and rangelength: .

<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
    <option value="b">Banana</option>
    <option value="a">Apple</option>
    <option value="p">Peach</option>
    <option value="t">Turtle</option>
</select>

jQuery.validate Chinese API

Validator

The validate method returns a Validator object. Validator objects have many ways to raise a checker or change the contents of a form, and here are a few common methods.

Built-in verification

The option of validate().

$(".selector").validate
({
    debug:true
})

$.validator.setDefaults({
    debug:true
})

$(".selector").validate({
    submitHandler:function(form) {
        $(form).ajaxSubmit();
    }
})

$("#myform").validate({
    ignore:".ignore"
})

$(".selector").validate({
    rules:{
        name:"required",
        email:{
            required:true,
            email:true
        }
    }
})

$(".selector").validate({
    rules:{
        name:"required",
        email:{
            required:true,
            email:true
        }
    },
    messages:{
        name:"Name不能为空",
        email:{       
            required:"E-mail不能为空",
            email:"E-mail地址不正确"
        }
    }
})

$("#myform").validate({
    groups:{
        username:"fname 
        lname"
    },
    errorPlacement:function(error,element) {
        if (element.attr("name") == "fname" || element.attr("name") == "lname")   
            error.insertAfter("#lastname");
        else    
            error.insertAfter(element);
    },
   debug:true
})

$(".selector").validate({  
    onsubmit:false
})

$(".selector").validate({   
    onfocusout:false
})

$(".selector").validate({
   onkeyup:false
})

$(".selector").validate({
   onclick:false
})

$(".selector").validate({
   focusInvalid:false
})

$(".selector").validate({
   focusCleanup:true
})

$(".selector").validate({ 
    errorClass:"invalid"
})

$(".selector").validate
   errorElement:"em"
})

$(".selector").validate({
   wrapper:"li"
})

$("#myform").validate({   
    errorLabelContainer:"#messageBox",
    wrapper:"li",
    submitHandler:function() { 
        alert("Submitted!") 
    }
})

$(".selector").validate({  
    showErrors:function(errorMap,errorList) {
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
        this.defaultShowErrors();
    }
})

$("#myform").validate({  
    errorPlacement:function(error,element) {  
        error.appendTo(element.parent("td").next("td"));
   },
   debug:true
})

$("#myform").validate({        
    success:"valid",
        submitHandler:function() { 
            alert("Submitted!") 
        }
})

AddMethod (name, method, message) method

The argument name is the name of the added method.

The argument method is a function that receives three arguments (value, element, param).
Value is the value of the element, element is the element itself, and param is the argument.

We can use addMethod to add validation methods in addition to the built-in Validation method. For example, there is a field that can only lose one letter, the range is a-f, as follows:

$.validator.addMethod("af",function(value,element,params){  
    if(value.length>1){
        return false;
    }
    if(value>=params[0] && value<=params[1]){
        return true;
    }else{
        return false;
    }
},"必须是一个字母,且a-f");

If there is a form field with the name "username", write it in rules:

username:{
   af:["a","f"]
}

The first argument of addMethod is the name of the added validation method, which is af.
AddMethod's third argument is a custom error prompt, where the prompt is: "Must be a letter, and a-f".
AddMethod's second argument, which is a function, is important in determining how this validation method is written.

If there is only one argument, write directly, such as af:a", then a is the only parameter, and if there are more than one argument, write it in .

Meta String way

$("#myform").validate({

   meta:"validate",

   submitHandler:function() { 
alert("Submitted!") }

})

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

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

<form id="myform">

  <input type="text" 
name="email" class="{validate:{ required:true,email:true }}" />

  <input type="submit" 
value="Submit" />

</form>

Example demonstration

A fictitious example

• The error message container
• Custom messages act as element data
• radio (radio button), checkbox (check button), and select (drop-down box)
• Interaction with form plug-ins (AJAX submission)
• Custom methods and message displays
• Dynamic forms
• Define the form style using jQuery UI Themeroller
• TinyMCE - a lightweight browser-based What You See And What You Get Editor
• File input box
• jQuery Mobile form validation

Real-world examples

• Milk registration form
• Marketo registration form
• Home sale folding panel form
• Remote CAPTCHA (Verification Code) verification