登陸一個系統時，前端js實現的驗證，記住密碼等功能
阿新 • • 發佈：2018-03-08
con hold div plain class submit nts 設置 發生
記住密碼部分：
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><title>記住密碼</title></head><body><form id="loginForm">//表單<input id="user"type="text"placeholder="用戶名"><br><input id="pswd"type="password"placeholder="密碼"><br><label><input id="remember"type="checkbox">記住密碼</label><br><input type=‘submit‘value="登錄"></form><script>window.onload =function(){varoForm = document.getElementById(‘loginForm‘);varoUser = document.getElementById(‘user‘);varoPswd = document.getElementById(‘pswd‘);varoRemember = document.getElementById(‘remember‘);//頁面初始化時，如果帳號密碼cookie存在則填充if(getCookie(‘user‘) && getCookie(‘pswd‘)){oUser.value = getCookie(‘user‘);oPswd.value = getCookie(‘pswd‘);oRemember.checked =true;}//復選框勾選狀態發生改變時，如果未勾選則清除cookieoRemember.onchange =function(){if(!this.checked){delCookie(‘user‘);delCookie(‘pswd‘);}};//表單提交事件觸發時，如果復選框是勾選狀態則保存cookieoForm.onsubmit =function(){if(remember.checked){setCookie(‘user‘,oUser.value,7);//保存帳號到cookie，有效期7天setCookie(‘pswd‘,oPswd.value,7);//保存密碼到cookie，有效期7天}};};//設置cookiefunctionsetCookie(name,value,day){vardate =newDate();date.setDate(date.getDate() + day);document.cookie = name +‘=‘+ value +‘;expires=‘+ date;};//獲取cookiefunctiongetCookie(name){varreg = RegExp(name+‘=([^;]+)‘);vararr = document.cookie.match(reg);if(arr){returnarr[1];}else{return‘‘;}};//刪除cookiefunctiondelCookie(name){setCookie(name,null,-1);};</script></body></html>
驗證框中是否有值，沒有就提醒
- //提交
- $("#submit").click(function() {
- document.getElementById("name").innerText = "";
- document.getElementById("pswd").innerText = "";
- if($("#username").val()=="" || $("#username").val()==null){
- document.getElementById("name").innerText = "用戶名不能為空";
- $("#username").focus();
- return false;
- }else if($("#password").val()=="" || $("#password").val()== null){
- document.getElementById("pswd").innerText = "密碼不能為空";
- $("#password").focus();
- return false;
- }
- });
登陸一個系統時，前端js實現的驗證，記住密碼等功能