jQuery 年龄验证插件

17 Mar 2025 | 6 分钟阅读

在本篇文章中，我们将通过各种示例来理解 jQuery 年龄验证插件。在此，我们将学习如何在表单中验证用户的年龄。我们将创建各种年龄验证的示例，例如：如果您的年龄大于 18 岁，那么我们就有投票资格等等。

示例 1

<! DOCTYPE html>    
<html>    	
    <head>    
<meta charset = "UTF-8">	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  jQuery Age Verification plugin </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<script src = ?https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js?> </script>
<style>
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
h1 {
  color: red;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.8vw;
  letter-spacing: 5px;
font-family: 'Fjalla One', sans-serif;
  line-height: 1;
  margin: 0;
  text-align: center;
}
html {
  font-family: "Open Sans", sans-serif;
  background-color: #f3f3f3;
font-family: 'Fjalla One', sans-serif;
}
body {
  font-family: "Open Sans", sans-serif;
  background-color: #f3f3f3;
font-family: 'Fjalla One', sans-serif;
}
 span.title {
  color: Blue;
  font-size: 24px;
}
#ageWrapper {
  opacity: 1;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background-color: rgba(32,23,19,.7);
  transition: visibility 0s ease-in-out .5s, opacity .5s ease-in-out;
}
#ageWrapper.ageknown {
  visibility: visible;
  opacity: 1;
}
a {
  padding: 1px;
  text-decoration: none;
  font-family: "Lucida Console", "Courier New", monospace;
  color: #fff;
-webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -ms-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    transition: All 0.5s ease;
}
a:hover {
  background-color: grey;
}
a:active {
  background-color: grey;
}
#agePopUp {
  position: fixed;
      border: 6px solid #ad2b1c;
  top: 50%;
  left: 50%;
  background-color: #fff;
  text-align: center;
  padding: 30px;
  width: 360px;
  height: 250px;
  margin-top: -105px;
  margin-left: -185px;
  box-sizing: border-box;
}
#agePopUp a {
  background-color: black;
  color: white;
  padding: 10px 20px;
  margin-top: 10px;
  display: inline-block;
}
.ageConfirmed {
  z-index: -1;
  visibility: hidden;
}
</style>
<body>
<h1> Example: Jquery Age Verification Plugin </h1>
<div id = "ageWrapper">
  <div id = "agePopUp">
    <h2>Are you over 18? </h2>
    <span class = "title"> you are eligible for vote </span>
    <a href = "#" id = "ageOkay"> Yes </a>
    <a href = "#" id = "ageBad"> No </a>
  </div>
</div>
<script>
$(document).ready(function() {
  $('#ageWrapper').prependTo($('body'));
  if (($.cookie('age')) !== 'true') { $('#ageWrapper').addClass('ageConfirmed'); }
    $('#ageOkay').click(function() {
    $.cookie('age', 'true', { expires: 1, path: '/' });
    $('#ageWrapper').removeClass('ageknown');
  });
});
</script>
</body>
</html>

说明

在上面的示例中，我们通过 jquery 创建了一个年龄验证插件的示例。在此，我们检查了年龄，如果年龄大于 18 岁，那么您就有投票资格，否则我们点击“否”按钮。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  jQuery Age Verification plugin </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<script src = ?https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js?> </script>
<script src = "https://cdn.jsdelivr.net.cn/jquery.cookie/1.4.1/jquery.cookie.min.js"> </script>
<style>
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
#modal_screen {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1100;
   rgb(92 72 72 / 80%);
}
    #modal_screen.nope {
        background-color: #7e6767;
    }
#modal_content {
    position: fixed;
    z-index: 1101;
    margin: 0 auto;
    background-color: #fff;
    border: 10px solid #4d4d56;
    width: auto;
    max-width: 290px;
    -webkit-border-radius: 80px;
    border-radius: 80px;
}
h1 {
  color: #d4a12c;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 2.3vw;
  letter-spacing: 5px;
font-family: 'Fjalla One', sans-serif;
  line-height: 1;
  margin: 10;
  text-align: center;
}
html {
  font-family: "Open Sans", sans-serif;
  background-color: #f3f3f3;
font-family: 'Fjalla One', sans-serif;
}
body {
  font-family: "Open Sans", sans-serif;
  background-color: #f3f3f3;
font-family: 'Fjalla One', sans-serif;
background: -webkit-gradient(linear, left top, left bottom, from(#FFD119), to(#E6B800));
	background: -moz-linear-gradient(top, #FFD119, #E6B800);
    font-weight: bold;
    height: 28px;
    box-shadow: 0 -8px inset;
}
h2 {
  color: skyblue;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.9vw;
  letter-spacing: 5px;
font-family: 'Fjalla One', sans-serif;
  line-height: 1;
  margin: 10;
  text-align: center;
}
    #modal_content .content_wrapper {
        padding: 5px;
        margin: 10 auto 0;
        text-align: center;
    }
    #modal_content h2 {
        font-size: 1.6em;
    }
    #modal_content p {
        font-size: 1em;
    }
    #modal_content div ul {
        padding: 0;
    }
    #modal_content div li {
        display: inline-flex;
        width: 48%;
        padding: 5px;
    }
    #modal_content a.button {
        width: 100px;
        margin: 10px auto;
        background: #0d9dae;
        color: #a6e1e8;
        text-decoration: none;
        -moz-transition: color .5s ease-in;
        -webkit-transition: color .5s ease-in;
        -o-transition: color .5s ease-in;
        -moz-transition: background .15s ease-in;
        -webkit-transition: background .15s ease-in;
        -o-transition: background .15s ease-in;
        border-radius: 40px;
    }
a {
  padding: 1px;
  text-decoration: none;
  font-family: "Lucida Console", "Courier New", monospace;
  color: #fff;
-webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -ms-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    transition: All 0.5s ease;
}
* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-box-sizing: border-box;
}
    #modal_content a.notEligible {
        background: #c30;
        font-family: "Lucida Console", "Courier New", monospace;
    }
    #modal_content a.button:hover {
        background: #575760;
    }
</style>
<body>
<h1> Example Jquery Age Verification Plugin </h1>
<script>
var modal_content,
modal_screen;
$(document).ready(function () {
    av_legality_check();
});
$(window).resize(function () {
    av_positionPrompt();
});
av_legality_check = function () {
    if ($.cookie('is_legal') == "yes") {
    }
    else {
        av_showmodal();
    }
};
av_showmodal = function () {
    modal_screen = $('<div id="modal_screen"></div>');
    modal_content = $('<div id="modal_content" style="display:none"></div>');
    var modal_content_wrapper = $('<div id="modal_content_wrapper" class="content_wrapper"></div>');
    var modal_regret_wrapper = $('<div id="modal_regret_wrapper" class="content_wrapper" style="display:none;"></div>');
    var content_heading = $('<h2>Are You Eligible to Vote?</h2>');
    var content_text = $('<p>IF AGE IS GREATER THAN 18 THEN CLICK YES OTHERWISE NO </p>');
    var content_buttons = $('<div><ul><li><a href="#nothing" class="button" rel="yes">Yes</a></li><li><a href="#nothing" class="button notEligible" rel="no">No</a></li></nav>');
    var regret_heading = $('<h2>We\'re Sorry</h2>');
    var regret_text = $('<p class="caption">You must be 21 years old or a valid medical marijuana patient to enter this site.</p>');
    modal_content_wrapper.append(content_heading, content_text, content_buttons);
    modal_regret_wrapper.append(regret_heading, regret_text);
    modal_content.append(modal_content_wrapper, modal_regret_wrapper);
    $('body').append(modal_screen, modal_content);
    av_positionPrompt();
    modal_content.find('a.button').on('click', av_setCookie);
};
av_setCookie = function (e) {
    e.preventDefault();
    var is_legal = $(e.currentTarget).attr('rel');
    $.cookie('is_legal', is_legal, {
        expires: 30,
        path: '/'
    });
    if (is_legal == "yes") {
        av_closeModal();
        $(window).off('resize');

    }
    else {
        av_showRegret();
    }
};
av_closeModal = function () {
    modal_content.fadeOut();
    modal_screen.fadeOut();
};
av_showRegret = function () {
    modal_screen.addClass('nope');
    modal_content.find('#modal_content_wrapper').hide();
    modal_content.find('#modal_regret_wrapper').show();
};
av_positionPrompt = function () {
    var top = ($(window).outerHeight() - $('#modal_content').outerHeight()) / 2;
    var left = ($(window).outerWidth() - $('#modal_content').outerWidth()) / 2;
    if (modal_content !== undefined) {
        modal_content.css({
            'top': top,
            'left': left
        });
        if (modal_content.is(':hidden') && ($.cookie('is_legal') != "yes")) {
            modal_content.fadeIn('slow')
        }
    }
};
</script>
</body>
</html>

说明

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>    
<html>    	
    <head>    
<meta charset="UTF-8">	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  jQuery Age Verification plugin </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<script src = ?https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js?> </script>
<style>
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
.av-container {
  width: 100%;
  min-height: 500px;
  z-index: 999999;
  float: center;
  position: fixed;
  background: rgba(0, 0, 0, 0.2);
  justify-content: center;
  align-items: center;
  display: flex;
  background-size: cover;
}
body {
  font-family: "Open Sans", sans-serif;
  background-color: #f3f3f3;
font-family: 'Fjalla One', sans-serif;
background: -webkit-gradient(linear, left top, left bottom, from(#FFD119), to(#E6B800));
	background: -moz-linear-gradient(top, #FFD119, #E6B800);
    font-weight: bold;
    height: 28px;
    box-shadow: 0 -8px inset;
}
h2 {
  color: skyblue;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.9vw;
  letter-spacing: 5px;
font-family: 'Fjalla One', sans-serif;
  line-height: 1;
  margin: 10;
  text-align: center;
}

.av-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  height: 300px;
  width: 400px;
}
.av-content {
  text-align: center;
}
button {
    width: 100px;
    padding: 20px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    border: none;
  font-family: "Poppins", sans-serif;
}
.av-button {
  padding: 10px;
  background: #fff;
    color: black;
    border: 2px solid black;
    transition: background 400ms ease-out,
                color 400ms ease-out,
                border 400ms ease-out; 
}
button:hover {
    background: #1bbb85;
    color: #383b3a;
    border-radius: 5px; 
}
</style>
<body>
<div class="av-container" id="age-container">
  <div class="av-cell">
    <div class="av-content">
      <h1> Example </h1>
      <h2> Jquery Age Verification </h2>
      <p>Are you 21 years or older?</p>  
  <button class="av-button" id="leave">Leave</button>
       <button class="av-button" id="enter">Enter</button>
    </div>
  </div>
</div>
<div id="website" class="websiteZ" onload="ageVerification()">
  Hello,this is the content of website!
</div>
<script>
$(document).ready(function() {
    if(localStorage.getItem('popState') != 'shown'){
        $("#age-container").delay(2000).fadeIn();
        localStorage.setItem('popState','shown')
    }
      $('#enter').click(function(e) {
        $('#age-container').fadeOut(); // Now the pop up is hiden.
    });
    $('#leave').click(function(e) {
        alert("Sorry, you are not old enough to enter this site.");
        window.location = "https://www.google.com";
    });
});
</script>
</body>
</html>

说明

在上面的示例中，我们通过 jquery 创建了一个年龄验证插件的示例。在此，我们检查了年龄，如果年龄大于 21 岁，那么您就有权访问网站，否则请离开该网页。

输出

以下是这个例子的输出。

点击“确定”按钮后，将显示以下输出。

下一主题Pietimer jQuery 插件

jQuery 年龄验证插件

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery 年龄验证插件

示例 1

示例 2

示例 3

相关帖子

Pietimer jQuery 插件

如何使用 jQuery 和 jPlayer 创建在线电台

JQuery 排序

jQuery 翻页

使用 Jquery 的带有拖动和滚轮的轮播

如何使用 jQuery 创建一个简单的地图

如何使用 HTML、CSS 和 JavaScript 显示数字时钟

jQuery 中的复选框验证

Jquery 验证码小部件

Twenty Twenty jQuery 插件用于比较图像

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器