jQuery 密码验证和深入理解JSONP前端jQuery框架

Posted 黎燃黎燃

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery 密码验证和深入理解JSONP前端jQuery框架相关的知识,希望对你有一定的参考价值。

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 submit
jQuery.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是:

<?php
header(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));
?>

以上是关于jQuery 密码验证和深入理解JSONP前端jQuery框架的主要内容,如果未能解决你的问题,请参考以下文章

jquery-validation JQ 表单验证

深入浅出Flask(20): H-ui前端框架的表单验证

带有 jQ​​uery AJAX 的 JSONP 回调函数

前端提交表单两种验证方式记录 jq或h5 required属性

jquery.Callbacks的实现

理解jquery的$.extend()$.fn和$.fn.extend()