jQuery password verification and in-depth understanding of JSONP [front-end jQuery framework]

jQuery Password Validation

The jQuery Password Authentication Plugin extends the jQuery Authentication Plugin and provides two components:
Function for evaluating password-related factors:
For example, mix of upper and lower case letters, mix of characters (numbers, special characters), length, and similarity to username (optional).
User-defined authentication plugin method that displays password strength using an evaluation function. The displayed text can be localized.
The appearance of intensity displays can be easily customized, message displays localized, and integrated into existing forms.
If you want to use a password validation plugin, add a class "password" to the input and add a basic tag showing strength where you need to display the form:

<form id="register">
    <label for="password">Password:</label>
    <input class="password" name="password" id="password" />
    <div class="password-meter">
        <div class="password-meter-message"> </div>
        <div class="password-meter-bg">
            <div class="password-meter-bar"></div>

Apply the Validate plugin to the form:

$(document).ready(function() {

The validator Passwordrating can be overloaded to implement different evaluation methods. or overload $. validator. Messages are cryptographically graded to provide additional messages, such as localization.

Password Validation Sample Demonstration

<!doctype html>
<meta charset="utf-8">
<title>Makes "field" required to be the same as #other</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
<form id="myform">
<label for="password">Password</label>
<input id="password" name="password" />
<label for="password_again">Again</label>
<input class="left" id="password_again" name="password_again" />
<input type="submit" value="Validate!">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="https://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
// just for the demos, avoids form submit
  debug: true,
  success: "valid"
$( "#myform" ).validate({
  rules: {
    password: "required",
    password_again: {
      equalTo: "#password"

The results are as follows:

Deep understanding of JSONP

Jsonp (JSON with padding) is a "use schema" for JSON that enables web pages to fetch data from other domains (websites), i.e. read data across domains.
Why do we need a special technology (jsonp) to access data from different domains (websites)? This is because of the same-origin policy.
The same-origin policy is a well-known security policy proposed by Netscape. All browsers that support JavaScript will now use this strategy.

Server data in Jsonp format

If the client wants to visit.
Suppose the customer wants to return data: [customername1", "customername2].
The actual data returned to the client is displayed as: callback function (["customername1", "customername2]").
The server-side file jsonp in the PHP code is:

header('Content-type: application/json');
//Get callback function name
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json data
$json_data = '["customername1","customername2"]';
//Output data in jsonp format
echo $jsoncallback . "(" . $json_data . ")";

The client implements the callbackFunction function

<script type="text/javascript">
function callbackFunction(result, methodName)
    var html = '<ul>';
    for(var i = 0; i < result.length; i++)
        html += '<li>' + result[i] + '</li>';
    html += '</ul>';
    document.getElementById('divCustomers').innerHTML = html;

page display

<div id="divCustomers"></div>


value: The value to encode. This function is only valid for UTF-8 encoded data.
options: binary mask consisting of the following constants



json_ String: The json string to be decoded, must be UTF-8 encoded data
Assoc: When the parameter is true, the array is returned; if it is false, the object is returned.
depth: an integer type parameter specifying the recursion depth
Options: binary mask, currently only JSON_ BIGINT_ AS_ STRING is supported
How to decode JSON data:

   $json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';

   var_dump(json_decode($json, true));

Tags: Javascript Front-end JQuery

Posted by dr_overload on Wed, 21 Sep 2022 21:15:10 +0300