Devacron.com

Javascript Age validation script – Εισαγωγη ηλικιας για προσβαση.

 Αν το περιεχομενο του website που φτιαχνετε ειναι ακαταλληλο για ατομα κατω των 18 ετων τοτε καλο θα ηταν κατα την εισοδο του χρηστη να συμπληρωνει την ηλικια του σε ενα πεδιο. Αυτο βεβαια δε σημαινει οτι υπαρχει προστασια αφου μπορει να βαλει οτι ημερομηνια θελει ομως ετσι ειναι σαν να αποδεχεται αυτο που θα δει παρακατω.

 Ο κωδικας ειναι αρκετα απλος και για την ακριβεια χρησιμοποιησα κομματια απο προηγουμενα ποστ. Εχουμε ενα πινακακι html με δυο input. Eνα το πεδιο για την ημερομηνια και ενα κουμπακι. Λιγο css styling και το jquerytools dateinput plugin για να μας κανει ευκολη τη ζωη στην εισαγωγη της ημερομηνιας. Λιγο προσοχη μονο στο οτι εγω προσθεσα και αυτα format: ‘mm / dd / yyyy’, selectors: ‘true’, yearRange: [-100,1]. Ας δουμε τον κωδικα:

<html>
<head>
    <title>http://www.xDev.gr - Mini age validation with user entry.</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
    <link rel="stylesheet" type="text/css" href="calendar.css"/>
    <style>
        table{font-family:"Verdana",Times,serif;}
        .maindiv{
            -moz-border-radius: 4px; 
            border-radius: 4px;         
            border-color:grey; 
            background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #FF6600 100%);
            background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #FF6600));
            background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #FF6600 100%);
            background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #FF6600 100%);
            width:284px; 
            height:80px;}
        th{color:white;}    
    </style>
</head>
<body>
    <div id="main" class="maindiv">
            <table>
                <tr>
                    <th>Enter your date of birth.</th>
                    <td></td>                                       
                </tr>
                <tr>
                    <td><input id="calendar1" type="date" /></td>                 
                    <td><input type="submit" id="submit" Value="Submit" onClick="window.location.reload()"/></td>
                </tr>
        </table>
    </div>
    <script type="text/javascript">   
        var xronia = $("input#calendar1").dateinput({
        format: 'mm / dd / yyyy', selectors: 'true', yearRange: [-100,1]}); 
        $("#submit").on("click", function(){
                                    var x = xronia.val();
                                    var today = new Date();
                                        var birthDate = new Date(x);
                                        var age = today.getFullYear() - birthDate.getFullYear();
                                        var m = today.getMonth() - birthDate.getMonth();
                                        if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
                                            age = age - 1;  }
                                        if (age >= "18"){alert("You are "+age+". Access granted");}
                                        else alert("You are only "+age+". Access denied");
                        });     
    </script>
</body>
</html>

Αυτο που κανω λοιπον ειναι μεσω jquery να επιλεγω το κουμπι και να του βαζω οταν γινει σε αυτο κλικ να τρεχει μια function η οποια παιρνει την τιμη του πεδιου και την συγκρινει με την σημερινη ημερομηνια. Αν ειναι πανω απο 18 βγαζει Access granted διαφορετικα δεν επιτρεπεται η προσβαση.

Μπορειτε να το δειτε online εδω η αν θελετε μπορειτε να κατεβασετε τον κωδικα και τα images/css κανοντας κλικ στο παρακατω link.

Javascript_Age_validation

Exit mobile version