前端驗證密碼

『壹』 前端頁面顯示了簽名的密鑰怎麼辦

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分鍾，然後用戶填寫驗證碼，前端向後端發送請求，後端驗證是否正確，正確則返回注冊成功。