表单验证插件jquery-validation以及案例

最新推荐文章于 2024-04-29 10:40:41 发布

十五喵

最新推荐文章于 2024-04-29 10:40:41 发布

阅读量189

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/2301_79206800/article/details/132308568

版权

表单验证插件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 中文字的每个有间距的显示样式】