表单验证插件jquery-validation以及案例
1，获取并引入：
（1）获取：官网：https://jqueryvalidation.org/
【home】-》【files】-》【Download】-》【jquery-validation-1.19.3.zip/Source code（zip）】
-》解压，使用的最关键的【dist 文件】-》只要下面四个文件
ps：min.js 是压缩版本的，一般项目上线直接使用压缩版本的，练习的话随意~
(2) 引入顺序，一定要：先引入jquery.js; 然后是 jquery.validate.js; 最后是 additional-methods.js
2， 将表单（表单 form元素 有id = "register-form"）与插件进行绑定：$(‘#register-form’).validate({ });
3， 了解插件的使用：官网：【DOCUMENTATION】->【Plugin Methods】-》[有非常多的属性：使用方式都可以参照给的示例]-
{ • debug：true；~调试模式，不提交表单
• onsubmit：true；~提交表单时做校验
• submitHandler~表单验证通过后，不提交表单，而是手动处理逻辑
• rules~ 指定表单验证规则【key：是元素； value：是要求； 要求可以查看官网，在【Methods】：
例如step 等等，有什么作用，可以翻译一下，或者在案例下测试一下】
常见规则： ▷ required：true；
▷ 自定义规则
• validClass~ 调整验证通过时的类样式名称
• errorElement~修改错误信息出现的元素，默认错误信息提示出现在label里，html中有for绑定的好处
• messages~设定对应规则验证错误提示文字（messages 是键值对形式，key是元素，value是规则~jquery自带，或者自自定义的规则）
• success~设定验证通过时的提示
}
4，使用示例代码：
❀ login_jqueryvalidation.js
$(function () { //使用jqueryvalidation验证表单 $('#register').validate({ debug:true, // onsubmit:true, rules:{ 'mobiePhone': { required: true, //自定义的规则mobile_phone 启动true mobile_phone:true }, }, //验证格式错误时文本提示 messages:{ 'mobiePhone': { required:'手机号码不能为空', mobile_phone:'手机号码格式错误' } }, validClass: 'success', //验证通过时的文本提示 success:function (error,element) { let tip = ''; switch (element.name){ case 'mobiePhone': tip ='手机号码正确'; break; } error.text(tip).addClass('success'); } }); });
5，其他的代码：
❀ custValidation.js
/** * 功能:自定义正则表达式验证手机号码等通用格式 * 作者:一乐 * 时间:2021/8/9 * 地点:一乐乐家园 */ $(function () { $.validator.addMethod( 'mobile_phone', function( value ) { let reg = /^1[3458]\d{9}/; return reg.test(value); }); });
❀ login_jqueryvalidation.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用jqueryvalidation插件</title> <!-- . 表示当前目录 .. 表示当前目录的上一级目录。 ./表示当前目录下的某个文件或文件夹，视后面跟着的名字而定 ../表示当前目录上一级目录的文件或文件夹，视后面跟着的名字而定。 --> <link rel="stylesheet" type="text/css" href="../css/login_jqueryvalidation.css"> </head> <body> <section> <div class="container" > <div class="logn"> <form id="register" method="post"> <h1>注册账号</h1> <div class="ipt-box"> <label for="mobiePhone">手机号码</label> <div class="right"> <input type="text" name="mobiePhone" id="mobiePhone" placeholder="请输入手机号码" autocomplete="off"/> </div> </div> <div class="ipt-box"> <label for="idCard">身份证号码</label> <div class="right"> <input type="text" name="idCard" id="idCard" placeholder="请输入身份证号码" autocomplete="off"/> </div> </div> <div class="ipt-box"> <label for="pwd">登录密码</label> <div class="right"> <input type="password" name="pwd" id="pwd" placeholder="请输入登录密码" autocomplete="off"/> </div> </div> <div class="ipt-box"> <label for="re-pwd">确认密码</label> <div class="right"> <input type="password" name="re-pwd" id="re-pwd" placeholder="请再次输入登录密码" autocomplete="off"/> </div> </div> <div class="ipt-box"> <label for="vali-code">验证码</label> <div class="right"> <div class="code"> <input type="text" name="vali-code" id="vali-code" autocomplete="off"> <label class="codeLb">获取验证码</label> </div> </div> </div> <div class="registerBtn"> <input type="submit" value="注册"/> </div> </form> </div> </div> </section> </body> <script type="text/javascript" src="../js/jquery/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="../js/jquery-validation/jquery.validate.min.js"></script> <script type="text/javascript" src="../js/jquery-validation/additional-methods.min.js"></script> <script type="text/javascript" src="../js/custValidation.js"></script> <script type="text/javascript" src="../js/login_jqueryvalidation.js"></script> </html>
❀ login_jqueryvalidation.css
body{ margin:0; background-color: #b7f1e4; } .container{ width: 500px; margin: 50px auto; background-color: white; padding: 15px; box-sizing: border-box; } /* 文本 ~居中*/ h1{ text-align: center; } /* 左边提示文本 */ .ipt-box { display: flex; justify-content: space-between; margin: 5px 0; box-sizing: border-box; } .ipt-box >label{ display: inline-block; width: 100px; height: 20px; text-align: justify; overflow: hidden; } .ipt-box > label:after{ display: inline-block; content: ''; width: 100%; } /* 右边输入框 */ .ipt-box .right{ width: calc(95% - 100px); } .ipt-box input{ width: 100%; height: 30px; border: 1px solid #cecccd; outline: none; border-radius: 4px; box-sizing: border-box; text-indent: 0.6em; /* 添加靠近时的过渡动画效果 */ transition: all .3s linear; } .ipt-box input::placeholder{ color: #cecccd; } .ipt-box input:hover{ border: 1px solid #40a9ff; } .ipt-box input:focus { border: 1px solid #40a9ff; box-shadow: 0 0 0 2px #d1e9ff; } /* 输入框error时 */ .ipt-box input.error{ border: 1px solid #e22018; box-shadow: 0 0 0 2px #eec7b9; } /* 输入框success时 */ .ipt-box input.success{ border: 1px solid #91cdad; box-shadow: 0 0 0 1px #91cdad; } /* 输入框error时文本提示 */ .ipt-box .right label.error{ color: #eec7b9; font-size: 13px; } /* 输入框success时文本提示 */ .ipt-box .right label.success{ color: #91cdad; font-size: 13px; } /* 最后一行的验证码 */ .ipt-box .right .code{ width: 100%; display: flex; justify-content: space-between; } #vali-code{ width:40%; } .ipt-box .right .codeLb{ display: inline-block; width: 80px; height: 30px; border-radius: 4px; background-color: #1890ff; color: white; font-size: 12px; line-height: 30px; text-align: center; } /* 注册 */ .registerBtn { width: 350px; height: 30px; margin: 30px auto; } /* label 标签是行级，设置大小无效 */ .registerBtn > input{ display: inline-block; width: 100%; height: 100%; outline: none; border: none; background-color: #1890ff; background-size: 100px; border-radius: 4px; color: white; font-size: 12px; line-height: 30px; text-align: center; }
ps：案例中的小细节：
1，文字是 （有间隔的形式~ 实现justify，注意justify的前提是最后一行之上的内容 ~ 且行块布局设置一下大小）
【label 中文字的每个有间距的显示样式】
2，发现某个元素使用了jquery-validate插件加入规则要求后，那个元素会添加上class=“error”；
同时html页面会多一个label的文字提醒元素，class也是error。
咱就可以通过css，设置加入规则要求错误时的样式显示：）
3，自定义通用的验证要求方法：咱封装到一个文件~custom-methods.js
（1）复制additional-methods.js文件 中的$validator.addMethod…方法声明;
（2）参数变量‘name’~自定义约束的属性，约束规则写到function里；~返回值是布尔类型的
~~~这样就成功自定义一个规则要求了
