写点什么

开源一夏 | jQuery 密码验证和深入理解 JSONP【前端 jQuery 框架】

作者:黎燃
  • 2022 年 8 月 05 日
  • 本文字数:1914 字

    阅读完需:约 6 分钟

jQuery Password Validation

jQuery 密码验证插件扩展了 jQuery 验证插件,并提供了两个组件:用于评估密码相关因素的函数:例如,大小写字母的混合、字符(数字、特殊字符)的混合、长度以及与用户名的相似性(可选)。用户定义的验证插件方法,使用评估函数显示密码强度。可以本地化显示的文本。可以简单地自定义强度显示的外观,本地化消息显示,并将其集成到现有表单中。如果要使用密码验证插件,请在输入中添加一个类“密码”,并在需要显示表单的位置添加显示强度的基本标记:


<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>        </div>    </div></form>
复制代码


对表单应用 Validate 插件:


$(document).ready(function() {  $("#register").validate();});
复制代码


可以重载验证程序 Passwordrating 实现了不同的评估方法。或过载 $。验证器。对消息进行密码分级以提供其他消息,例如本地化。

Password Validation 示例演示

<!doctype html><html><head><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"> </head><body><form id="myform"><label for="password">Password</label><input id="password" name="password" /><br/><label for="password_again">Again</label><input class="left" id="password_again" name="password_again" /><br><input type="submit" value="Validate!"></form><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><script>// just for the demos, avoids form submitjQuery.validator.setDefaults({  debug: true,  success: "valid"});$( "#myform" ).validate({  rules: {    password: "required",    password_again: {      equalTo: "#password"    }  }});</script></body></html>
复制代码


运行结果如下:


深入理解 JSONP

Jsonp(带填充的 JSON)是 JSON 的“使用模式”,它使网页能够从其他域名(网站)获取数据,即跨域读取数据。为什么我们需要一种特殊的技术(jsonp)来访问来自不同领域(网站)的数据?这是因为同源策略。同源策略是 Netscape 提出的一种著名的安全策略。现在,所有支持 JavaScript 的浏览器都将使用此策略。

服务器的 Jsonp 格式数据

如果客户想要访问。假设客户希望返回数据:[customername1”,“customername2]。实际返回给客户机的数据显示为:回调函数([“customername1”、“customername2]”)。PHP 代码中的服务器端文件 jsonp 是:


<?phpheader('Content-type: application/json');//获取回调函数名$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);//json数据$json_data = '["customername1","customername2"]';//输出jsonp格式的数据echo $jsoncallback . "(" . $json_data . ")";?>
复制代码

客户端实现 callbackFunction 函数

<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;}</script>
复制代码

页面展示

<div id="divCustomers"></div>
复制代码

参数

value: 要编码的值。该函数只对 UTF-8 编码的数据有效。options:由以下常量组成的二进制掩码


 JSON_HEX_QUOT, JSON_HEX_TAG, JSON_HEX_AMP, JSON_HEX_APOS, JSON_NUMERIC_CHECK, JSON_PRETTY_PRINT, JSON_UNESCAPED_SLASHES, JSON_FORCE_OBJECT, JSON_PRESERVE_ZERO_FRACTION, JSON_UNESCAPED_UNICODE, JSON_PARTIAL_OUTPUT_ON_ERROR。
复制代码

json_decode

json_ String:要解码的 json 字符串,必须是 UTF-8 编码数据 Assoc:参数为 true 时,返回数组;如果为 false,则返回该对象。深度:指定递归深度的整数类型参数选项:二进制掩码,目前只支持 JSON_ BIGINT_ AS_ STRING 如何解码 JSON 数据:


<?php   $json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
var_dump(json_decode($json)); var_dump(json_decode($json, true));?>
复制代码


发布于: 刚刚阅读数: 4
用户头像

黎燃

关注

前端工程师 2022.05.06 加入

专注学习分享前端知识。

评论

发布
暂无评论
开源一夏 | jQuery 密码验证和深入理解JSONP【前端jQuery框架】_开源_黎燃_InfoQ写作社区