使用jquery-validate实现注册界面表单验证(附源码)

最新推荐文章于 2021-07-24 17:24:45 发布

胖嘟嘟62

最新推荐文章于 2021-07-24 17:24:45 发布

阅读量1.1k

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/qq_55069056/article/details/118164981

版权

javascript jquery

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用jquery-validate实现注册界面表单验证(附源码)

简介

今天写了一个注册界面，并使用jquery-validate表单验证插件完成了验证功能，当全部输入满足要求且同意用户协议已勾选才可通过验证并进行提交。

HTML代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册界面</title>
        <!-- External CSS -->
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <!-- CSS -->
        <link rel="stylesheet" href="css/register.css">
    </head>
    <body class="min-vh-100 d-flex justify-content-center align-items-center">
        <div class="content">
            <div class="dialog">
                <div class="back-login">
                    &laquo;&nbsp;已有账号？<a class="text-secondary text-decoration-none" href="login.html">立即登录</a>
                </div>
                <form id="register-form" action="" method="post">
                    <h2 id="register-title" class="text-center ">注册账号</h2>
                    <div class="hint"></div>
                    <div class="form-group">
                        <label class="text-nowrap" for="account">账&emsp;号：</label>
                        <input name="account" id="account" class="form-control" type="text" placeholder="请输入3-10位账号">
                    </div>
                    <div class="hint"></div>
                    <div class="form-group">
                        <label class="text-nowrap" for="password">密&emsp;码：</label>
                        <input name="password" id="password" class="form-control" type="password" placeholder="请输入6-16位密码">
                    </div>
                    <div class="hint"></div>
                    <div class="form-group">
                        <label class="text-nowrap" for="email">邮&emsp;箱：</label>
                        <input name="email" id="email" class="form-control" type="email" placeholder="请输入您的邮箱地址">
                    </div>
                    <div class="hint"></div>
                    <div class="form-group">
                        <label class="text-nowrap" for="ID">身份证：</label>
                        <input name="ID" id="ID" class="form-control" type="text" placeholder="请输入居民身份证号码">
                    </div>
                    <div class="hint"></div>
                    <div class="form-group">
                        <label class="text-nowrap" for="name">姓&emsp;名：</label>
                        <input name="name" id="name" class="form-control" type="text" placeholder="请输入您的姓名">
                    </div>
                    <div class="hint"></div>
                    <div class="form-group">
                        <input name="protocol" id="protocol" class="" type="checkbox">
                        <label for="protocol" class="protocol-text">我已阅读并同意<a href="javascript:">《XX通行证用户协议》</a>和<a
                                href="javascript:">《隐私政策》</a></label>
                    </div>
                    <div class="hint"></div>
                    <div class="form-group">
                        <button id="register-btn" class="btn-cyan" type="submit">注&emsp;册</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- External JS -->
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.3/additional-methods.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

        <!-- JS -->
        <script src="js/validate.js"></script>
    </body>
</html>

在这里插入图片描述

JS代码

let errorIcon = '<i class="fa fa-times-circle" style="color: red;"></i> ';

$.validator.addMethod('isChecked', function(value, input, param){
    if(!param){
        return true;
    }else{
        if($('#protocol').is(':checked')) return true;
        else return false;
    }
}, '');

$('#register-form').validate({
    // debug: true,
    errorElement: 'small',
    // errorClass: 'className',     // 此处会同时更改.error和input标签的样式
    errorPlacement: function (error, input){
        error.addClass('pl-3');
        input.parent().next().append(error);
    },
    success: function (error){
        // console.log(error[0].id);
        if(error[0].id != 'protocol-error')
            error.html('<i class="fa fa-check-circle" style="color: #01cd08;"></i>');
    },
    rules: {
        account: {
            required: true,
            rangelength: [3,10],
        },
        password: {
            required: true,
            rangelength: [6, 16],
        },
        email: {
            required: true,
            email: true
        },
        ID: {
            required: true,
            pattern: '[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]',
        },
        name: {
            required: true,
        },
        protocol: {
            isChecked: true,
        }
    },
    messages: {
        account: {
            required: errorIcon + '账号为空',
            rangelength: errorIcon + '账号长度为{0}-{1}'
        },
        password: {
            required: errorIcon + '密码为空',
            rangelength: errorIcon + '密码长度为{0}-{1}'
        },
        email: {
            required: errorIcon + '邮箱为空',
            email: errorIcon + '邮箱格式不正确'
        },
        ID: {
            required: errorIcon + '身份证号为空',
            pattern: errorIcon + '身份证号码无效'
        },
        name: {
            required: errorIcon + '姓名为空'
        },
        protocol: {
        }
    },
});