表单验证插件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 等等,有什么作用,可以翻译一下,或者在案例下测试一下】

     常见规则: requiredtrue

                        ▷ 自定义规则

• 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里;~返回值是布尔类型的

~~~这样就成功自定义一个规则要求了

 

表单验证插件jquery-validation以及案例的更多相关文章

  1. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

  2. 表单验证插件----jquery validation

    1.下载地址:http://jqueryvalidation.org/ 2.使用方法: <script type="text/javascript" src="ht ...

  3. jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js

    原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352   最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...

  4. jQuery插件 -- 表单验证插件jquery.validate.js

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...

  5. 表单验证插件jquery.validate.js

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...

  6. 表单验证插件jquery.validate的使用方法演示

    jQueryValidate表单验证效果 jquery.validate验证错误信息的样式控制 <!--validate验证插件的基础样式--> input.error{border: 1 ...

  7. 表单验证插件 jquery.validata 使用方法

    参考资料:http://www.runoob.com/jquery/jquery-plugin-validate.html 下载地址 jquery.validate插件的文档地址http://docs ...

  8. jq中的表单验证插件------jquery.validate

    今天我们来说一下表单验证,有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的,现在我来给大家介绍一下表单验证的插件:jquery.validate.min.js 它是与jquery一起结合用来使 ...

  9. jquery表单验证插件 jquery.form.js ------转载

    Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用. 1.JQuery框架软件包下载 文件: jquery.rar 大小: 29KB 下载: 下载 2.Form插件下载 文件 ...

  10. jquery表单验证插件 jquery.form.js-转

    来自:http://www.cnblogs.com/luluping/archive/2009/04/15/1436177.html Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满 ...

随机推荐

  1. react的三大属性

    react的三大属性 state props  refs props 来自外部属性 states 来自内部状态 refs 用于表示组件内某个元素 state基础(最重要的属性) state是组件对象最 ...

  2. Maven项目无法下载JAR包,输入mvn help:system出现No plugin found for prefix 'help' in the current project and in the plugin groups的解决方案

    这个问题困扰了我很久,一直无法解决:我在虚拟机里面按照同样的步骤配置了三次maven项目,每次都能成功:可一旦到外面maven项目总是创建失败,输入mvn help:system总是出现No plug ...

  3. Linux中mail的用法

    简介:mail命令是命令行的电子邮件发送和接收工具.操作的界面不像elm或pine那么容易使用,但功能非常完整Red Hat上sendmail服务一般是自动启动的.可以通过下面的命令查看sendmai ...

  4. 痞子衡嵌入式:在串口波特率识别实例里逐步展示i.MXRT上提升代码执行性能的十八般武艺

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是在串口波特率识别实例里逐步展示i.MXRT上提升代码执行性能的十八般武艺. 恩智浦 MCU SE 团队近期一直在加班加点赶 SBL 项目 ...

  5. 使用 python 把一个文件生成 C 语言中的数组并保存到头文件中

    (一)要做什么 之前有这么一个需求,是要把一个二进制文件里面的数据,转换成 C 代码里面的数组,可以看之前的一篇文章: NUC980 运行 RT-Thread 驱动 SPI 接口 OLED 播放 ba ...

  6. Gym 101206L Daylight Saving Time 根据年月日计算星期

    题意: [3月的第二个周日02:00:00 , 3月的第二个周日03:00:00) 这个区间都不是PST或PDT,[11月的第一个周日01:00:00 , 11月的第一个周日02:00:00) 这个区 ...

  7. 常用API文字版

    常用API Object类 jvm启动,默认导入的是java.lang包中的内容,该包下的内容不需要import进行导入. 概念 该类是java体系中的根类,所有对象都将该类作为直接或者间接父类 所有 ...

  8. CentOS-Docker安装PostgreSQL(单点)

    下载镜像 $ docker pull postgres 创建目录 $ mkdir -p /usr/postgres/data $ chmod -R 755 /usr/postgres/data 运行镜 ...

  9. MOS管开关电路笔记

    1.MOS管开关电路是利用MOS管栅极(g)控制MOS管源极(s)和漏极(d)通断的原理构造的电路.MOS管分为N沟道与P沟道,所以开关电路也主要分为两种.P沟道或N沟道共四种类型,但实际应用的只有增 ...

  10. c语言:大纲

    C语言大纲:1.C语言程序设计知识(1)基本数据类型与简单程序设计(2)分支程序设计(3)循环程序设计(4)数组(5)函数(6)结构体(7)指针2.C语言程序设计(1)顺序结构的程序设计(2)分支结构 ...