前端验证密码

‘壹’ 前端页面显示了签名的密钥怎么办

1，首先引入前端需要用到的js：crypto-js，下载命令 npm install crypto-js

将 crypto-js 文件放到要引用的路径
以下是要引用到清中巧的js
2，引用，jQuery也要记得引用哦
3，在登录页的登录按钮的function里，设置key值和iv值，这是加密的设置字段，定义要进行加密的密码passwordNode
下面再加个function

function aesMinEncrypt(key, iv, word){
var _word = CryptoJS.enc.Utf8.parse(word),
_key = CryptoJS.enc.Utf8.parse(key),
_iv = CryptoJS.enc.Utf8.parse(iv);
var encrypted = CryptoJS.AES.encrypt(_word, _key, {
iv: _iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.toString();
}
3，（另一种）上面的过程也可以这样

function encryption(){
//密钥 (需要前端和后端保持一致)十六位作为密钥
var key = "ABCDEFGHIJKL_key";
//密钥偏移量 (需要前端和后端保持一致)十六位作为密钥偏移量
var iv = "ABCDEFGHIJKLM_iv";
var username=document.getElementById("usr").value;
// var passwordNode=document.getElementById("paw").value;
var passwordNode=aesMinEncrypt(key,iv,$("#paw").val());
console.log(passwordNode);
alert("加密后的密码为："+passwordNode);

$.ajax({
url: "login",
async:false,
type: "POST",
data: {'username':username,'password':passwordNode},
success: function (result) {
$("html").html(result);
}
});
}
function aesMinEncrypt(key, iv, word){
var _word = CryptoJS.enc.Utf8.parse(word),
_key = CryptoJS.enc.Utf8.parse(key),
_iv = CryptoJS.enc.Utf8.parse(iv);
var encrypted = CryptoJS.AES.encrypt(_word, _key, {
iv: _iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.toString();
$("#form").submit();
}
4，前端加密就算是完成了，接下来是后端解密，后端解密需要用到一个工具类 AESUtils,里面是解密方法代码如下

package com.wuye.common.utils;

import cn.jpush.api.utils.StringUtils;
import sun.misc.BASE64Decoder;

import javax.crypto.Cipher;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;

/**
* TODO
*
* @author CSD
* @date 2022-07-28 14:16
*/
public class AESUtils {

//密钥 (需要前端和培碰后端保持一致)十六位作为密钥答键
private static final String KEY = "ABCDEFGHIJKL_key";

//密钥偏移量 (需要前端和后端保持一致)十六位作为密钥偏移量
private static final String IV = "ABCDEFGHIJKLM_iv";

//算法
private static final String ALGORITHMSTR = "AES/CBC/PKCS5Padding";

/**
* base 64 decode
* @param base64Code 待解码的base 64 code
* @return 解码后的byte[]
* @throws Exception
*/
public static byte[] base64Decode(String base64Code) throws Exception{
return StringUtils.isEmpty(base64Code) ? null : new BASE64Decoder().decodeBuffer(base64Code);
}

/**
* AES解密
* @param encryptBytes 待解密的byte[]
* @return 解密后的String
* @throws Exception
*/
public static String aesDecryptByBytes(byte[] encryptBytes) throws Exception {

Cipher cipher = Cipher.getInstance(ALGORITHMSTR);

byte[] temp = IV.getBytes("UTF-8");
IvParameterSpec iv = new IvParameterSpec(temp);

cipher.init(Cipher.DECRYPT_MODE, new SecretKeySpec(KEY.getBytes(), "AES"), iv);
byte[] decryptBytes = cipher.doFinal(encryptBytes);

System.out.print(new String(decryptBytes));
return new String(decryptBytes);
}

/**
* 将base 64 code AES解密
* @param encryptStr 待解密的base 64 code
* @return 解密后的string
* @throws Exception
*/
public static String aesDecrypt(String encryptStr) throws Exception {
return StringUtils.isEmpty(encryptStr) ? null : aesDecryptByBytes(base64Decode(encryptStr));
}

//测试一下
public static void main(String[] args) throws Exception {
String str = "Q uus tQvLdwtGSldhrtKQ==";
str = str.replace(" ", "+");
System.out.println(str);
aesDecrypt(str);
}
}

5，在密码验证的java页面做解密，建议打断点看看走的哪里，解密很简单，就一句

password = AESUtils.aesDecrypt(getPassword

‘贰’ 前台输入账号密码，后台代码是怎么一步步实现的，是如何从用户表中读取信息的，可以详细说下么

从前台输入账号密码到后台读取用户信息的过程可以分成以下几个步骤：
1. 用户在前台输入账号和密码后点击登录按钮，浏览器将账号和密码以POST请求的形式发送给服务器。

2. 服务器收到POST请求，进行身份认证，包括验证账号密码是否正确、账号是否被锁定等，如果身份认证通过，则将一个加密的cookie发送到浏览器。

3. 浏览器收到cookie后，会将其存储到本地缓存中，下次请求时会自动携带此cookie。

4. 当用户在后续请求后台资源时，请求头部携带上cookie，服务器从头部获取cookie并进行验证，验证通过后读取用户数闭信息，将用户信息返回给前台浏览器。

在以上过程中，后台代码需要读取用户信息，通常需要进行以下操作：

1. 对数据库进行连接，使用数据库语句（如SELECT）查询用户表中是否存在该用户。

2. 如果存在该用户，则读取用滚枣户表中的用户信息（如用户名、密码、邮箱等）。

3. 对读取的用户信息做处理，如加密用户密码等。

4. 如果身份认证通过，则将一个加密的cookie发送到浏览器。

总之，整个过程需要前后端代码配合完成，其中前大毕拆端处理用户输入的账号密码，后端负责验证身份并进行数据处理。在实现时需要考虑到安全性和用户友好性。

‘叁’ 求前端验证js代码

这是一般表单中会用到的 1. 长度限制

<script>
function test()
{
if(document.a.b.value.length>50)
{
alert(”不能超过50个字符！”);
document.a.b.focus();
return false;
}
}
</script>
<form name=a onsubmit=”return test()”>
<textarea name=”b” cols=”40″ wrap=”VIRTUAL” rows=”6″></textarea>
<input type=”submit” name=”Submit” value=”check”>
</form>
2. 只能是汉字

<input onkeyup=”value=”/oblog/value.replace(/[^\u4E00-\u9FA5]/g,”)”>
3.” 只能是英文

<script language=javascript>
function onlyEng()
{
if(!(event.keyCode>=65&&event.keyCode<=90))
event.returnvalue=false;
}
</script>
<input onkeydown=”onlyEng();”>
4. 只能是数字

<script language=javascript>
function onlyNum()
{
if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
//考虑小键盘上的数字键
event.returnvalue=false;
}
</script>
<input onkeydown=”onlyNum();”>
5. 只能是英文字符和数字

<input onkeyup=”value=”/oblog/value.replace(/[\W]/g,””) “onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\d]/g,”))”>
6. 验证邮箱格式

<SCRIPT LANGUAGE=javascript RUNAT=Server>
function isEmail(strEmail) {
if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
return true;
else
alert(”oh”);
}
</SCRIPT>
<input type=text onblur=isEmail(this.value)>
7. 屏蔽关键字(这里屏蔽***和****)

<script language=”javascript1.2″>
function test() {
if((a.b.value.indexOf (”***”) == 0)||(a.b.value.indexOf (”****”) == 0)){
alert(”:)”);
a.b.focus();
return false;}
}
</script>
<form name=a onsubmit=”return test()”>
<input type=text name=b>
<input type=”submit” name=”Submit” value=”check”>
</form>
8. 两次输入密码是否相同

<FORM METHOD=POST ACTION=”">
<input type=”password” id=”input1″>
<input type=”password” id=”input2″>
<input type=”button” value=”test” onclick=”check()”>
</FORM>
<script>
function check()
{
with(document.all){
if(input1.value!=input2.value)
{
alert(”false”)
input1.value = “”;
input2.value = “”;
}
else document.forms[0].submit();
}
}
</script>
够了吧 :)
屏蔽右键 很酷

oncontextmenu=”return false” ondragstart=”return false” onselectstart=”return false”
加在body中
二
2.1 表单项不能为空

<script language=”javascript”>
<!–
function CheckForm()
{
if (document.form.name.value.length == 0) {
alert(”请输入您姓名!”);
document.form.name.focus();
return false;
}
return true;
}
–>
</script>
2.2 比较两个表单项的值是否相同

<script language=”javascript”>
<!–
function CheckForm()
if (document.form.PWD.value != document.form.PWD_Again.value) {
alert(”您两次输入的密码不一样！请重新输入.”);
document.ADDUser.PWD.focus();
return false;
}
return true;
}
–>
</script>
2.3 表单项只能为数字和”_”,用于电话/银行帐号验证上,可扩展到域名注册等

<script language=”javascript”>
<!–
function isNumber(String)
{
var Letters = ”1234567890-”; //可以自己增加可输入值
var i;
var c;
if(String.charAt( 0 )==’-')
return false;
if( String.charAt( String.length - 1 ) == ’-’ )
return false;
for( i = 0; i < String.length; i ++ )
{
c = String.charAt( i );
if (Letters.indexOf( c ) < 0)
return false;
}
return true;
}
function CheckForm()
{
if(! isNumber(document.form.TEL.value)) {
alert(”您的电话号码不合法！”);
document.form.TEL.focus();
return false;
}
return true;
}
–>
</script>
2.4 表单项输入数值/长度限定

<script language=”javascript”>
<!–
function CheckForm()
{
if (document.form.count.value > 100 || document.form.count.value < 1)
{
alert(”输入数值不能小于零大于100!”);
document.form.count.focus();
return false;
}
if (document.form.MESSAGE.value.length<10)
{
alert(”输入文字小于10!”);
document.form.MESSAGE.focus();
return false;
}
return true;
}
//–>
</script>
2.5 中文/英文/数字/邮件地址合法性判断

<SCRIPT LANGUAGE=”javascript”>
<!–
function isEnglish(name) //英文值检测
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charCodeAt(i) > 128)
return false;
}
return true;
}
function isChinese(name) //中文值检测
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charCodeAt(i) > 128)
return true;
}
return false;
}
function isMail(name) // E-mail值检测
{
if(! isEnglish(name))
return false;
i = name.indexOf(” at ”);
j = name dot lastIndexOf(” at ”);
if(i == -1)
return false;
if(i != j)
return false;
if(i == name dot length)
return false;
return true;
}
function isNumber(name) //数值检测
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charAt(i) < ”0″ || name.charAt(i) > ”9″)
return false;
}
return true;
}
function CheckForm()
{
if(! isMail(form.Email.value)) {
alert(”您的电子邮件不合法！”);
form.Email.focus();
return false;
}
if(! isEnglish(form.name.value)) {
alert(”英文名不合法！”);
form.name.focus();
return false;
}
if(! isChinese(form.cnname.value)) {
alert(”中文名不合法！”);
form.cnname.focus();
return false;
}
if(! isNumber(form.PublicZipCode.value)) {
alert(”邮政编码不合法！”);
form.PublicZipCode.focus();
return false;
}
return true;
}
//–>
</SCRIPT>
2.6 限定表单项不能输入的字符

<script language=”javascript”>
<!–
function contain(str,charset)// 字符串包含测试函数
{
var i;
for(i=0;i<charset.length;i++)
if(str.indexOf(charset.charAt(i))>=0)
return true;
return false;
}
function CheckForm()
{
if ((contain(document.form.NAME.value, ”%\(\)><”)) || (contain(document.form.MESSAGE.value, ”%\(\)><”)))
{
alert(”输入了非法字符”);
document.form.NAME.focus();
return false;
}
return true;
}
//–>
</script>
1. 检查一段字符串是否全由数字组成
—————————————

<script language=”Javascript”><!–
function checkNum(str){return str.match(/\D/)==null}
alert(checkNum(”1232142141″))
alert(checkNum(”123214214a1″))
// –></script>

2. 怎么判断是否是字符
—————————————

if (/[^\x00-\xff]/g.test(s)) alert(”含有汉字”);
else alert(”全是字符”);

3. 怎么判断是否含有汉字
—————————————

if (escape(str).indexOf(”%u”)!=-1) alert(”含有汉字”);
else alert(”全是字符”);

4. 邮箱格式验证
—————————————

//函数名：chkemail
//功能介绍：检查是否为Email Address
//参数说明：要检查的字符串
//返回值：0：不是 1：是
function chkemail(a)
{ var i=a.length;
var temp = a.indexOf(’@');
var tempd = a.indexOf(’.');
if (temp > 1) {
if ((i-temp) > 3){
if ((i-tempd)>0){
return 1;
}

}
}
return 0;
}

5. 数字格式验证
—————————————

//函数名：fucCheckNUM
//功能介绍：检查是否为数字
//参数说明：要检查的数字
//返回值：1为是数字，0为不是数字
function fucCheckNUM(NUM)
{
var i,j,strTemp;
strTemp=”0123456789″;
if ( NUM.length== 0)
return 0
for (i=0;i<NUM.length;i++)
{
j=strTemp.indexOf(NUM.charAt(i));
if (j==-1)
{
//说明有字符不是数字
return 0;
}
}
//说明是数字
return 1;
}

6. 电话号码格式验证
—————————————

//函数名：fucCheckTEL
//功能介绍：检查是否为电话号码
//参数说明：要检查的字符串
//返回值：1为是合法，0为不合法
function fucCheckTEL(TEL)
{
var i,j,strTemp;
strTemp=”0123456789-()# “;
for (i=0;i<TEL.length;i++)
{
j=strTemp.indexOf(TEL.charAt(i));
if (j==-1)
{
//说明有字符不合法
return 0;
}
}
//说明合法
return 1;
}
7. 判断输入是否为中文的函数
—————————————

function ischinese(s){
var ret=true;
for(var i=0;i<s.length;i++)
ret=ret && (s.charCodeAt(i)>=10000);
return ret;
}

8. 综合的判断用户输入的合法性的函数
—————————————

<script language=”javascript”>
//限制输入字符的位数开始
//m是用户输入，n是要限制的位数
function issmall(m,n)
{
if ((m<n) && (m>0))
{
return(false);
}
else
{return(true);}
}
9. 判断密码是否输入一致
—————————————

function issame(str1,str2)
{
if (str1==str2)
{return(true);}
else
{return(false);}
}
10. 判断用户名是否为数字字母下滑线
—————————————

function notchinese(str){
var reg=/[^A-Za-z0-9_]/g
if (reg.test(str)){
return (false);
}else{
return(true); }
}
2.8. form文本域的通用校验函数
—————————————
作用：检测所有必须非空的input文本，比如姓名，账号，邮件地址等等。
该校验现在只针对文本域，如果要针对form里面的其他域对象，可以改变判断条件。
使用方法：在要检测的文本域中加入title文字。文字是在提示信息，你要提示给用户的该字段的中文名。比如要检测用户名
html如下<input name=”txt_1″ title=”姓名”>,当然，最好用可视化工具比如dreamweaver什么的来编辑域。
如果要检测数字类型数据的话，再把域的id统一为sz.
javascript判断日期类型比较麻烦，所以就没有做日期类型校验的程序了.高手可以补充。
程序比较草，只是提供一个思路。抛砖引玉！ ：）
哦，对了，函数调用方法：

< form onsubmit=”return dovalidate()”>
function dovalidate()
{
fm=document.forms[0] //只检测一个form,如果是多个可以改变判断条件
for(i=0;i<fm.length;i++)
{
//检测判断条件，根据类型不同可以修改
if(fm[i].tagName.toUpperCase()==”INPUT” &&fm[i].type.toUpperCase()==”TEXT” && (fm[i].title!=”"))

if(fm[i].value=”/blog/=”")//
{
str_warn1=fm[i].title+”不能为空!”;
alert(str_warn1);
fm[i].focus();
return false;
}
if(fm[i].id.toUpperCase()==”SZ”)//数字校验
{
if(isNaN(fm[i].value))
{ str_warn2=fm[i].title+”格式不对”;
alert(str_warn2);
fm[i].focus();
return false;
}
}
}
return true;
}

‘肆’ 前端的token验证 （以vue为例）

1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码

2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token

3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面

4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面

5、每次调后端接口，都要在请求头中加token

6、后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401

7、如果前端拿到状态码为401，就清除token信息并跳转到登录页面

‘伍’ 采用javascript技术验证用户名和密码是否正确

下面是简单的示例代码：```javascript// 获取输入框元素const username = document.getElementById('username');const password = document.getElementById('password');// 获取提交按钮元素const submitButton = document.getElementById('submit');/液培/ 添加点击事件监听器submitButton.addEventListener('click', () =\u003e { // 获取输入框的值 const usernameValue = username.value; const passwordValue = password.value; // 发送请求验证 fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: usernameValue, password: passwordValue }) }) .then(response =\u003e response.json()) .then(data =\u003e { if (data.success) { // 登录成功 alert('登录成功！'); // 跳转到首页或其他需要登录才能访问的页面 window.location.href = '/home'; } else { // 登录失败 alert(data.message); } }) .catch(error =\u003e { console.error(error); alert('网络错误，请稍后再试！'); });});```这段代码假设后端提供了 `/api/login` 接口用于验证用户名和密码。具体实现方式可能因慧肆后端框架的不同而有所不同，不过一般来说，服务器端会从请求对象中读取请求体并解析成 JSON，然后根据用户名和密码去查询数据库或其他数据源，判断是否验证通过，并将验证结果返回给前端。在以上代码中，我们通过 `fetch()` 函数发起了 POST 请求，并将用户名和密码放在请求体中以 JSON 格式传递给服务器。当收到服务器返回的响应后，我们检查其中的 `success` 字段来判断是否验证通过。当然，这只是简单示例，实际项目中，可能还需要考虑一些安全性问题，例如闹碧唯防止跨站脚本攻击 (XSS)，防止 CSRF 攻击等。

‘陆’ 前端：输入密码，并实时进行密码合法性和一致性检验

-显示启旦（实时提示密码信息）

-检验第一次输入的密码的合法性

-检悄闭扰态纤验二次输入的一致性

‘柒’ 前端处理登录的时候验证码怎么解决

验证码是不需要前端处理的，是后台编写程序，随机生成的，只需要在前台页面展示即可。

‘捌’ html页面，验证密码后跳转进入该页面，不能直接输入url进入改页面。怎么实现最好能在前端实现

用HTML貌似 实现不了。
如果要求不能用后台实现，只在前台实现的话，建议你用JSP。
在A页面输入验证码，跳B页面。
在A页面输入完验证码通过后，传一个值给B页面
request.setAttribute("check","true");
然后在B页面的开头取得这个值
String check = request.getAttribute("check");
if(check==null||check==""){
window.location.href="a.jsp"; //如何B页面取不到这个check，说明不是A页面跳过来了，那么就让他誉吵尘跳回A页面重新输入。
}
这个方法能实现你的要求 ，但是安碰返全风险高。
如果为了网站的安全，还建议你是后台判断。

手动打了这么多，望采纳！庆禅

‘玖’ 前端短信验证码登录可以自动登录吗

前端短信验证码登录可以自动登录。方法如下：
1、前端登录页面手机号验证码登录页面。按钮样式都是自己写的class，按钮实际上是用的div+a标签来实现的，添加了动态的样式。
2、前端获取验证码的函数。先进行手机号的判空处理，为空则提示用户不能为空，再使用正则表达式对手机号码进行限制。
3、后端获取验证码代码。从平台上获取相关参数，填入。调用它们平台提供的发送短信验证码的接口函数，查看是否发送成功，发送成功则将该phoneNum-verifyCode用键值对的形式存到redis数据库，有效时间为5分钟，5分钟之后自动过期，提示用户需要在5分钟之内填写完毕并登录。
4、注册功能前后端的实现。多几个判空条件（如名字、密码不能为空，用户是否存在，手机号是否已被注册，用户名是否已被注册），实现的流程相似，先通过手机获取验证码，将发送成功的验证码存到redis数据库，有效时间为5分钟，然后用户填写验证码，前端向后端发送请求，后端验证是否正确，正确则返回注册成功。