jquery-validation - 01 - 小记

 jquery-validation - 概述

jquery-validation是一款jquery插件，用于前端验证。支持如下特点：

• 提供了大量内置校验规则，支持扩展校验规则
• 支持自定义错误信息
• 支持自定义错误样式、正确样式

 jquery-valition - 使用

1️⃣ 引入

 <!-- 1.  引入css - 提供了error等错误样式 -->
<link href="../css/cmxform.css" rel="stylesheet" type="text/css" />
 <!-- 1. 引入jquery -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
 <!-- 1.  引入jquery-validation - 提供了 基础校验规则 -->
<script type="text/javascript" src="../js/jquery.validate.js"></script>
 <!-- 1.  引入additional-methods - 提供了 额外校验规则(比如信用卡校验creditcart、文件类型校验accept) -->
<script type="text/javascript" src="../js/additional-methods.js"></script>
<!-- 1.   引入message_zh - 验证不ok，会提示错误信息，引入之后，提示信息是中文 -->
<script type="text/javascript" src="../js/localization/messages_zh.js.js"></script>

2️⃣ 初始化

初始化使用validate()方法，提供rules(校验规则)，初始化校验插件(主要做设置默认值、绑定方法)。

let $jqueryValidation = $form.validate({
   rules: {
       firstName: "required",
       zipcode: "isZipCode"
   }
})

3️⃣ 触发校验

触发校验有两种方式，分别是自动触发、手动触发

• 自动触发 - 点击submit、组件blur(失去焦点)、组件onkeyup(按键抬起)
• 手动触发 - 也叫js触发，使用form()方法。

 <div>
     <!--  使用form()方法触发-->
     <input type="button" value="js触发验证" onclick="$jqueryValidation.form();">
     <!-- 自动触发 - 点击submit按钮-->
     <input type="submit" value="submit按钮触发验证">
 </div>