如何在登出按钮后清除用户名，密码字段？ [英] How to clear fields of username, password after cliking logout button?
本文介绍了如何在登出按钮后清除用户名，密码字段？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好，我正在使用javascript创建单页登录和注销项目。我的问题是在点击注销按钮后字段未清除并显示以前输入的详细信息.plz帮助我注销如何在注销后清除字段。 ..谢谢提前
我的尝试：
< HTML>
< head>
< title>
登录页面
< / title>
< style>
.logo
{
float：right;
}
#wel
{
float：right;
}
< / style>
< / head>
< body onload =GenerateCaptcha（）;>
< div id =frmstyle =display：none; >
< div id =demo>< / div>
UserName< input type =textid =userid/>< div id =erroru>< / div>
密码< input type =passwordid =pass/>< div id =errorp>< / div>
输入验证码文本：
< input type =textid =txtCompare/>
< input type =textid =txtCaptchastyle =text-align：center; border：none; font-weight：bold; font-size：20px; font-family：Modern/> ;
< input type =buttonid =btnrefreshvalue =刷新onclick =GenerateCaptcha（）; />
< button type =submitonclick =loadDoc（）> submit< / button>
< / div>
< div id ='frm2'>
< div id =frm1> < / DIV>
< div id =logoutstyle =display：none; >
< button type =submitonclick =logout（）;> logout< / button>
< / div>
< / div>
< button id =btnonclick =show（）;>< img class =logosrc =signin1.pngwidth =20pxheight =20pxtop = 960x75像素;>< /按钮>
< script>
function show（）{
var ele = document.getElementById（'frm'）;
if（ele.style.display =='none'）
{
ele.style.display ='block';
document.getElementById（'btn'）。style.display ='none';
}
}
函数logout（）{
var ele1 = document.getElementById（'frm2'）;
if（ele1.style.display =='none'）
{
ele1.style.display ='block';
}
else {
ele1.style.display ='none';
}
var ele2 = document.getElementById（'btn'）;
if（ele2.style.display =='none'）
{
ele2.style.display ='block';
}
}
函数loadDoc（）{
/*console.log(\"In checkform（））;
var xhttp = new XMLHttpRequest（）;
var url =http://192.168.100.7:8082/login/Login;
var myarr = {User：document.getElementById（userid）。value，password：document.getElementById（pass）。value};
var params = JSON.stringify（myarr）;
console.log（params）;
var params =inputJsonStr+=+ params;
xhttp.open（POST，url，true）;
xhttp.setRequestHeader（Content-type，application / x-www-form-urlencoded）;
/*xhttp.onreadystatechange = function（）
{
if（（this.readyState == 4）&&（this.status == 200））
{
console.log（获得响应后+ xhttp.responseText）;
var my = JSON.parse（this.responseText）;
}
}; * /
//console.log（发送请求前）;
//xhttp.send(params）;
var emailRegex = /^ [A-Za-z0-9._]*\@[A-Za-z]*\。[A-Za-z] {2,5} $ /;
var lreg = new RegExp（^（（（？=。* [az]）（？=。* [AZ]））|（（？=。* [az]）（？=。* [ 0-9]））|（（= * [AZ]）（= * [0-9]）））（= {6，}））？？？。
femail = document.getElementById（userid）。value;
fpass = document.getElementById（pass）。value;
if（femail ==|| fpass ==）
{
document.getElementById（'demo'）。innerHTML =输入电子邮件和密码;
返回false;
}
else if（！emailRegex.test（femail））
{
document.getElementById（'demo'）。innerHTML =输入有效的电子邮件;
返回false;
}
else if（！lreg.test（fpass））
{
document.getElementById（'demo'）。innerHTML =输入有效密码;
返回false;
}
其他
{
var user =teja;
document.getElementById（'frm1'）。innerHTML ='welcome'+ user;
var el = document.getElementById（'logout'）;
if（el.style.display =='none'）
{
el.style.display ='block';
}
var ele = document.getElementById（'frm'）;
if（ele.style.display =='block'）
{
ele.style.display ='none';
}
}
//其他
// {
// alert（成功）;
// var userid = document.getElementById（userid）。value;
// var name = userid.substring（0，userid.lastIndexOf（@））;
//document.getElementById(\"wel\").innerHTML=\"Welcome+ name;
//}
var str1 = removeSpaces（document.getElementById（'txtCaptcha'）。value）;
var str2 = removeSpaces（document.getElementById（'txtCompare'）。value）;
if（str1！= str2）
document.getElementById（demo）。innerHTML =请输入正确的captchcode;
}
函数GenerateCaptcha（）{
var chr1 = Math.ceil（Math.random（）* 10）+'';
var chr2 = Math.ceil（Math.random（）* 10）+'';
var chr3 = Math.ceil（Math.random（）* 10）+'';
var str = new Array（4）.join（）。replace（/（。| $）/ g，function（）{return（（Math.random（）* 36）| 0）.toString（36 ）[Math.random（）< .5？toString：toUpperCase]（）;}）;
var captchaCode = str + chr1 +''+ chr2 +''+ chr3;
document.getElementById（txtCaptcha）。value = captchaCode
}
/ *验证验证函数* /
/ *从验证码中删除空格* /
函数removeSpaces（string）{
return string.split（''）。join（''）;
}
< / script>
< / body>
< / html>
解决方案
/;
var lreg = new RegExp（^（（（？=。* [az]）（？=。* [AZ]））|（（？=。* [az]）（？=。* [ 0-9]））|（（= * [AZ]）（= * [0-9]）））（= {6，}））？？？。
femail = document.getElementById（userid）。value;
fpass = document.getElementById（pass）。value;
if（femail ==|| fpass ==）
{
document.getElementById（'demo'）。innerHTML =输入电子邮件和密码;
返回false;
}
else if（！emailRegex.test（femail））
{
document.getElementById（'demo'）。innerHTML =输入有效的电子邮件;
返回false;
}
else if（！lreg.test（fpass））
{
document.getElementById（'demo'）。innerHTML =输入有效密码;
返回false;
}
其他
{
var user =teja;
document.getElementById（'frm1'）。innerHTML ='welcome'+ user;
var el = document.getElementById（'logout'）;
if（el.style.display =='none'）
{
el.style.display ='block';
}
var ele = document.getElementById（'frm'）;
if（ele.style.display =='block'）
{
ele.style.display ='none';
}
}
//其他
// {
// alert（成功）;
// var userid = document.getElementById（userid）。value;
// var name = userid.substring（0，userid.lastIndexOf（@））;
//document.getElementById(\"wel\").innerHTML=\"Welcome+ name;
//}
var str1 = removeSpaces（document.getElementById（'txtCaptcha'）。value）;
var str2 = removeSpaces（document.getElementById（'txtCompare'）。value）;
if（str1！= str2）
document.getElementById（demo）。innerHTML =请输入正确的captchcode;
}
函数GenerateCaptcha（）{
var chr1 = Math.ceil（Math.random（）* 10）+'';
var chr2 = Math.ceil（Math.random（）* 10）+'';
var chr3 = Math.ceil（Math.random（）* 10）+'';
var str = new Array（4）.join（）。replace（/（。|
）/ g，function（）{return（（Math.random（） * 36）| 0）。toString（36）[Math.random（）< .5？toString：toUpperCase]（）;}）;
var captchaCode = str + chr1 +''+ chr2 +''+ chr3;
document.getElementById（txtCaptcha）。value = captchaCode
}
/ *验证验证函数* /
/ *从验证码中删除空格* /
函数removeSpaces（string）{
return string.split（''）。join（''）;
}
< / script>
< / body>
< / html>
尝试将控件包装在< form>中带有id =something - 然后，当您注销或其他任何操作时，请调用something.reset（）。这将重置该表单元素中的所有控件。
HTML DOM表单reset（）方法 [ ^ ]
Hello,I am creating single page login and logout project using javascript..my problem is after clicking the logout button the fields is not clearing and is showing previous entered details.plz help me out how to clear the fields after logout...thanks in advance
What I have tried:
<html>
<head>
<title>
Login page
</title>
<style>
.logo
{
float: right;
}
#wel
{
float: right;
}
</style>
</head>
<body onload="GenerateCaptcha();">
<div id="frm" style="display: none;" >
<div id="demo"></div>
UserName<input type="text" id="userid"/><div id="erroru"></div>
Password<input type="password" id="pass"/><div id="errorp"></div>
Enter the Captcha Text:
<input type="text" id="txtCompare" />
<input type="text" id="txtCaptcha" style="text-align: center; border: none; font-weight: bold; font-size: 20px; font-family: Modern" />
<input type="button" id="btnrefresh" value="Refresh" onclick="GenerateCaptcha();" />
<button type="submit" onclick="loadDoc()" >submit</button>
</div>
<div id='frm2'>
<div id="frm1" > </div>
<div id="logout" style="display: none;" >
<button type="submit" onclick="logout();">logout</button>
</div>
</div>
<button id="btn" onclick="show();"><img class="logo" src="signin1.png" width="20px" height="20px" top="75px;"></button>
<script>
function show(){
var ele = document.getElementById('frm');
if(ele.style.display == 'none')
{
ele.style.display = 'block';
document.getElementById('btn').style.display='none';
}
}
function logout(){
var ele1 = document.getElementById('frm2');
if(ele1.style.display == 'none')
{
ele1.style.display = 'block';
}
else{
ele1.style.display = 'none';
}
var ele2 = document.getElementById('btn');
if(ele2.style.display == 'none')
{
ele2.style.display = 'block';
}
}
function loadDoc(){
/*console.log("In checkform()");
var xhttp= new XMLHttpRequest();
var url="http://192.168.100.7:8082/login/Login";
var myarr={User:document.getElementById("userid").value,password:document.getElementById("pass").value};
var params=JSON.stringify(myarr);
console.log(params);
var params="inputJsonStr"+ "=" + params;
xhttp.open("POST",url,true);
xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
/*xhttp.onreadystatechange = function()
{
if ((this.readyState == 4) && (this.status == 200))
{
console.log("after getting response" + xhttp.responseText);
var my=JSON.parse(this.responseText);
}
};*/
//console.log("before sending request");
//xhttp.send(params);
var emailRegex= /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/;
var lreg = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})");
femail = document.getElementById("userid").value;
fpass=document.getElementById("pass").value;
if (femail == "" || fpass == "")
{
document.getElementById('demo').innerHTML= "enter the email and password";
return false;
}
else if(!emailRegex.test(femail))
{
document.getElementById('demo').innerHTML= "enter the valid email";
return false;
}
else if(!lreg.test(fpass))
{
document.getElementById('demo').innerHTML= "enter the valid password";
return false;
}
else
{
var user="teja";
document.getElementById('frm1').innerHTML='welcome' +user;
var el = document.getElementById('logout');
if(el.style.display == 'none')
{
el.style.display = 'block';
}
var ele = document.getElementById('frm');
if(ele.style.display == 'block')
{
ele.style.display = 'none';
}
}
//else
//{
//alert("success");
//var userid = document.getElementById("userid").value;
//var name = userid.substring(0, userid.lastIndexOf("@"));
//document.getElementById("wel").innerHTML="Welcome " + name;
//}
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('txtCompare').value);
if (str1 != str2)
document.getElementById("demo").innerHTML="please enter correct captchcode";
}
function GenerateCaptcha() {
var chr1 = Math.ceil(Math.random() * 10) + '';
var chr2 = Math.ceil(Math.random() * 10) + '';
var chr3 = Math.ceil(Math.random() * 10) + '';
var str = new Array(4).join().replace(/(.|$)/g, function () { return ((Math.random() * 36) | 0).toString(36)[Math.random() < .5 ? "toString" : "toUpperCase"](); });
var captchaCode = str + chr1 + ' ' + chr2 + ' ' + chr3;
document.getElementById("txtCaptcha").value = captchaCode
}
/* Validating Captcha Function */
/* Remove spaces from Captcha Code */
function removeSpaces(string) {
return string.split(' ').join('');
}
</script>
</body>
</html> 解决方案
/; var lreg = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})"); femail = document.getElementById("userid").value; fpass=document.getElementById("pass").value; if (femail == "" || fpass == "") { document.getElementById('demo').innerHTML= "enter the email and password"; return false; } else if(!emailRegex.test(femail)) { document.getElementById('demo').innerHTML= "enter the valid email"; return false; } else if(!lreg.test(fpass)) { document.getElementById('demo').innerHTML= "enter the valid password"; return false; } else { var user="teja"; document.getElementById('frm1').innerHTML='welcome' +user; var el = document.getElementById('logout'); if(el.style.display == 'none') { el.style.display = 'block'; } var ele = document.getElementById('frm'); if(ele.style.display == 'block') { ele.style.display = 'none'; } } //else //{ //alert("success"); //var userid = document.getElementById("userid").value; //var name = userid.substring(0, userid.lastIndexOf("@")); //document.getElementById("wel").innerHTML="Welcome " + name; //} var str1 = removeSpaces(document.getElementById('txtCaptcha').value); var str2 = removeSpaces(document.getElementById('txtCompare').value); if (str1 != str2) document.getElementById("demo").innerHTML="please enter correct captchcode"; } function GenerateCaptcha() { var chr1 = Math.ceil(Math.random() * 10) + ''; var chr2 = Math.ceil(Math.random() * 10) + ''; var chr3 = Math.ceil(Math.random() * 10) + ''; var str = new Array(4).join().replace(/(.|
)/g, function () { return ((Math.random() * 36) | 0).toString(36)[Math.random() < .5 ? "toString" : "toUpperCase"](); }); var captchaCode = str + chr1 + ' ' + chr2 + ' ' + chr3; document.getElementById("txtCaptcha").value = captchaCode } /* Validating Captcha Function */ /* Remove spaces from Captcha Code */ function removeSpaces(string) { return string.split(' ').join(''); } </script> </body> </html>
Try wrapping your controls in a <form> with an id="something" - then, when you logout, or whatever else you do, call something.reset(). This resets all controls within that form element.
HTML DOM Form reset() Method[^]
这篇关于如何在登出按钮后清除用户名，密码字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
