当前位置: 首页 > 工具软件 > jqValidate > 使用案例 >

JQ validate

曹臻
2023-12-01

在项目开发中,我们经常会遇到表单校验,如果去手写校验会比较费时,这里发现这个插件即好用又强大,基本满足我们所有表单验证的要求。

一、jQuery Validate简介

1、jQuery Validate: 一款历史悠久的Jquery插件

官网地址: https://jqueryvalidation.org/

Github地址: https://github.com/jquery-validation/jquery-validation

在线文档: http://docs.jquery.com/Plugins/Validation

JQuery Validation插件作为式历史悠久的jQuery插件之一,经过了全球各种项目的验证,得到了很多WEB开发者的好评,作为一个表单验证的解决方案,Validation有很多的优点,比如:

1.内置验证规则:拥有必填、数字、email、url和信用卡号码等内置验证规则;

2.自定义验证规则:可以很方便地自定义验证规则(通过$.validator.addMethod(name,method,message)实现);

3.简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认信息提示的功能(通过设置插件中的message参数来实现);

4.实时验证:可以通过keyup或blur事件触发验证,而不仅仅在表单提交的时候验证。

  1. 异步验证: 用ajax实现了服务器端远程验证

二、默认校验规则

规制

描述

1

required:true

必须输入的字段。

2

remote:"check.php"

使用 ajax 方法调用 check.php 验证输入值。

3

email:true

必须输入正确格式的电子邮件。

4

url:true

必须输入正确格式的网址。

5

date:true

必须输入正确格式的日期。日期校验 ie6 出错(ie已下线,无需考虑)

6

dateISO:true

必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。

7

number:true

必须输入合法的数字(负数,小数)。

8

digits:true

必须输入整数。

9

creditcard:

必须输入合法的信用卡号。

10

equalTo:"#field"

入值必须和 #field 相同。(多用与确认密码,确认邮箱)

11

accept:

输入拥有合法后缀名的字符串(上传文件的后缀)。

12

maxlength:5

输入长度最多是 5 的字符串(汉字算一个字符)。

13

minlength:10

输入长度最小是 10 的字符串(汉字算一个字符)。

14

rangelength:[5,10]

输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。

15

range:[5,10]

输入值必须介于 5 和 10 之间。

16

max:5

输入值不能大于 5。

17

min:10

输入值不能小于 10。

2.1 默认提示

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提供了中文信息提示包,位于下载包的 dist/localization/messages_zh.js,内容如下:

(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} 的数值")
});

}));

你可以将该本地化信息文件 dist/localization/messages_zh.js 引入到页面:

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

三、jQuery Validate使用

使用之前,首先需要引入依赖文件

<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
  1. 将校验写在标签中(在标签中加入required则该字段为必填)

<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>
  1. 将校验写在js中

<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
// 在输入框失焦时校验
$().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: "请选择两个主题"
        }
    });
});
</script>
<style>
.error{
    color:red;
}
</style>

<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" style="display:none">至少选择两个</label>
    </fieldset>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>

四、常用方法及注意问题

  1. 用其他方式代替默认submit

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

 $(".selector").validate({     
 submitHandler: function(form) 
   {      
      $(form).ajaxSubmit();     
   }  
 }) 
  1. 设置Validate的默认值

$.validator.setDefaults({
  submitHandler: function(form) { alert("提交事件!");form.submit(); }
});
  1. debug,只验证不提交表单

$.validator.setDefaults({
   debug: true
})
  1. ignore:忽略某些元素不验证

ignore: ".ignore"
  1. 更改错误信息显示的位置

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

参数

类型

描述

默认值

errorClass

String

指定错误提示的 css 类名,可以自定义错误提示的样式。

"error"

errorElement

String

用什么标签标记错误,默认是 label,可以改成 em。

"label"

errorContainer

Selector

显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大。

errorContainer: "#messageBox1, #messageBox2"

errorLabelContainer

Selector

把错误信息统一放在一个容器里面。

wrapper

String

用什么标签再把上边的 errorELement 包起来。

一般这三个属性同时使用,实现在一个容器内显示所有错误提示的功能,并且没有信息时自动隐藏。

errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"
  1. 每个字段验证通过执行函数

success:String,Callback

要验证的元素通过验证后的动作,如果跟一个字符串,会当作一个 css 类,也可跟一个函数。

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

添加 "valid" 到验证元素,在 CSS 中定义的样式 <style>label.valid {}</style>。

success: "valid"
  1. 验证的触发方式修改

下面的虽然是 boolean 型的,但建议除非要改为 false,否则别乱添加。

触发方式

类型

描述

默认值

onsubmit

Boolean

提交时验证。设置为 false 就用其他方法去验证。

true

onfocusout

Boolean

失去焦点时验证(不包括复选框/单选按钮)。

true

onkeyup

Boolean

在 keyup 时验证。

true

onclick

Boolean

在点击复选框和单选按钮时验证。

true

focusInvalid

Boolean

提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点。

true

focusCleanup

Boolean

如果是 true 那么当未通过验证的元素获得焦点时,移除错误提示。避免和 focusInvalid 一起用。

true

  1. 重置表单

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

});

10、异步验证

remote:URL

使用 ajax 方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用 data 选项。

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

远程地址只能输出 "true" 或 "false",不能有其他输出。

11.添加自定义校验

addMethod:name, method, message
// 中文字两个字节
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));
}, "请正确填写您的邮政编码");

注意:要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建议一般写在 additional-methods.js 文件中。

注意:在 messages_cn.js 文件中添加:isZipCode: "只能包括中文字、英文字母、数字和下划线"。调用前要添加对 additional-methods.js 文件的引用。

内容来源:https://www.runoob.com/jquery/jquery-plugin-validate.html

仅为自己需要记录,详细教程请访问以上网址查看。

 类似资料:

相关阅读

相关文章

相关问答