JQuery 登录，记住密码，密码小眼睛

 <form  method="post" id="loginForm"><div class="login-form"><li ><img th:src="@{/img/user.png}"><input type="text" name="user" onkeyup="this.value=this.value.replace(/\s+/g,''),this.value=this.value.toLowerCase()"placeholder="请输入您的用户名" autocomplete="off" class="login-forminfo" onkeydown=keyDown()id="user"></li><li class="pass"><img th:src="@{/img/password.png}"><input type="password" name="pwd" placeholder="请输入您的密码" autocomplete="off" id="pswd"class="login-forminfo input_m" passwordshow="1" onkeydown=keyDown()><i class="eye"></i></li><li><input type="checkbox" name="remember" class="jzzm " id="remember"><span>记住密码</span></li><li><button type="submit" lay-submit lay-filter="login"><spanstyle="cursor: pointer;">立即登录</span></button></li></div></form>

记住密码

var oForm = document.getElementById('loginForm');var oUser = document.getElementById('user');var oPswd = document.getElementById('pswd');var oRemember = 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天}};//设置cookiefunction setCookie(name, value, day) {var date = new Date();date.setDate(date.getDate() + day);document.cookie = name + '=' + value + ';expires=' + date;};//获取cookiefunction getCookie(name) {var reg = RegExp(name + '=([^;]+)');var arr = document.cookie.match(reg);if (arr) {return arr[1];} else {return '';}};//删除cookiefunction delCookie(name) {setCookie(name, null, -1);};

密码小眼睛

 $(".eye").click(function () {if ($(".input_m").attr("passwordshow") == 1) {if ($(".pass").children("input").length < 2) {$(".pass input").after('<input style="display:none;" class="input_m login-forminfo "  autocomplete="off" type="text" passwordshow="2" id="pswd" name="pwd" placeholder="请输入您的密码">');}$(".eye").css("background", "url('img/eyeOn1.png')center 0 no-repeat");$("[passwordshow='2']").val($("[passwordshow='1']").val());$("[passwordshow='1']").remove();$("[passwordshow='2']").show();} else {if ($(".pass").children("input").length < 2) {$(".pass input").after('<input style="display:none;" class="input_m login-forminfo " type="password" autocomplete="off" passwordshow="1"id="pswd" name="pwd" placeholder="请输入您的密码">');}$(".eye").css("background", "url('img/eyeOff1.png')center 0 no-repeat");$("[passwordshow='1']").val($("[passwordshow='2']").val());$("[passwordshow='2']").remove();$("[passwordshow='1']").show();}});

判断url地址中是否包含字符串

 var url = window.location.href;if (url.indexOf("error=true") >= 0) { //判断url地址中是否包含字符串layer.msg("用户名或密码为空或错误，请重新输入!")}

回车登录

     function keyDown() {if (event.keyCode == 13) {event.returnValue = false;event.cancel = true;document.getElementById("loginForm").submit();}}

JQuery 登录，记住密码，密码小眼睛相关推荐

JS实现密码框小眼睛的显示与隐藏(使用字体图标)
JS实现密码框小眼睛的显示与隐藏(使用字体图标) 前端学习路上的小练习,如若不喜,请勿喷. 眼睛使用的是 iconfont 阿里矢量图标库的内容链接:https://www.iconfont.cn/ ...
在ie edge中消除默认出现的密码框小眼睛标志
在ie edge中消除默认出现的密码框小眼睛标志 <style>/*去除ie edge的密码框默认出现的小眼睛给人添乱这一块,巨硬从来都没让我失望过*/input[type="p ...
Vue实现登录记住账号密码功能的思路与过程
文章来源: 学习通http://www.bdgxy.com/ 目录实现思路这里有三种方法来存储账号密码: 功能界面记住账号密码功能的具体实现密码加密 localStorage cookies ...
浏览器兼容：在ie edge中消除默认出现的密码框小眼睛标志
在ie edge中消除默认出现的密码框小眼睛标志 <style>/*去除ie edge的密码框默认出现的小眼睛给人添乱这一块,巨硬从来都没让我失望过*/input[type="p ...
点击密码框显示密码（点击密码框小眼睛可显示输入密码）
案例分析` 登录注册页面中,当我们输入密码时,密码显示的是不可见的,是属于密码框类型,点击小眼睛之后显示密码. **核心思路:**1.点击眼睛按钮,把不可见的密码框类型改成可见的文本框就可看见里面的密 ...
解决IE 自带的密码框小眼睛与输入框X符号
input::-ms-clear{display:none;}/*删除文本框中的叉号*/ input::-ms-reveal{display:none;} /*删除密码框中的小眼睛*/ 注:使用inp ...
vue 和 uniapp 的密码框小眼睛（通用）
密码输入框的小眼睛适合Vue 或者 uniapp使用步骤1动态绑定:type 步骤2在data里声明 Data(){ Return{ seen:'', pwdType: 'password', // ...
Qt实现密码输入框隐藏密码_小眼睛显示密码功能
我的博客:https://blog.csdn.net/qq_37388044 我的知乎:https://www.zhihu.com/people/bbtganmin 联系方式:知乎私信转载或者引用本 ...
Element的input密码框小眼睛（点击眼睛显示密码,再次点击图标隐藏密码）
一.知识点: 带 icon 的输入框,可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标. 因为图标涉及点击 ...
Uni App-----之u-input（密码明文小眼睛切换）
本文作为临时记录使用. 前言 : 最近做注册和忘记密码功能,需要写到小眼睛显示密码是否明文展示.出现的问题是在pc上正常实现效果,在手机端不生效. 解决思路: H5 暂未支持动态切换,请使用 v-if ...

JQuery 登录，记住密码，密码小眼睛

登录

记住密码

密码小眼睛

判断url地址中是否包含字符串

回车登录

JQuery 登录，记住密码，密码小眼睛相关推荐

最新文章

热门文章