suchen

Heim  >  Artikel  >  Web-Frontend  >  Detailliertes Beispiel für die js-Implementierung der Anmelde- und Registrierungsschnittstelle

Detailliertes Beispiel für die js-Implementierung der Anmelde- und Registrierungsschnittstelle

小云云
小云云Original
2018-05-18 14:25:448637Durchsuche

Dieser Artikel stellt hauptsächlich die js-Implementierung der Anmelde- und Registrierungsschnittstelle vor. Ich hoffe, dass er für alle hilfreich ist.

Vervollständigen Sie das HTML+CSS+JS der Anmelde- und Registrierungsseite. Zu den zu überprüfenden Eingabeelementen gehören:

Benutzername 6-12 Ziffern

Der erste Buchstabe darf kein a sein Zahl

Kann nur Buchstaben und Zahlen enthalten

Passwort 6-12 Ziffern

Ob die beiden Passwörter auf der Registrierungsseite konsistent sind

HTML-Code: 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>欢迎你，请先登陆！</title>
 <script type="text/javascript" src="../static/jsp/lx.js"></script>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 <link rel="stylesheet" href="../static/css/lx.css">

</head>
<body>
<p class="box">
 <h2>登陆</h2>

 <p class="input_box">
  <input id="uname" type="text" name="user" placeholder="请输入用户名">
 </p>
 <p class="input_box">
  <input id="upass" type="password" name="psw" placeholder="请输入密码">
 </p>
 <p id="error_box"><br></p>
 <p class="input_box">
  <button type="button" class="btn btn-primary" onclick="fnLogin()">登陆</button>&nbsp&nbsp&nbsp&nbsp
  <a href="regist.html"><input type="button" class="btn btn-info" name="regist" value="注册"></a>
 </p>



</p>
</body>
</html>

CSS-Code: 

*{
 margin: 0;
 padding: 0;
 font-family: 微软雅黑;
 font-size: 12px;
}
.box{
 width: 390px;
 height: 320px;
 border: solid 1px #ddd;
 background: #FFF;
 position: absolute;
 left: 50%;
 top:42%;
 margin-left: -195px;
 margin-top: -160px;
 text-align: center;
}
.box h2{
 font-weight: normal;
 color:#666;
 font-size: 16px;
 line-height: 40px;
 overflow: hidden;
 text-align: center;
 border-bottom: solid 1px #ddd;
 background: #f7f7f7;
}
.input_box{
 width:350px;
 padding-bottom: 15px;
 margin: 0 auto;
 overflow: hidden;
}

Javascript-Code: 

function fnLogin() {
 var oUname = document.getElementById("uname")
 var oUpass = document.getElementById("upass")
 var oError = document.getElementById("error_box")
 var isError = true;
 if (oUname.value.length > 20 || oUname.value.length < 6) {
  oError.innerHTML = "用户名请输入6-20位字符";
  isError = false;
  return;
 }else if((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){
  oError.innerHTML = "首字符必须为字母";
  return;
 }else for(var i=0;i<oUname.value.charCodeAt(i);i++){
  if((oUname.value.charCodeAt(i)<48)||(oUname.value.charCodeAt(i)>57) && (oUname.value.charCodeAt(i)<97)||(oUname.value.charCodeAt(i)>122)){
   oError.innerHTML = "必须为字母跟数字组成";
   return;
  }
 }

 if (oUpass.value.length > 20 || oUpass.value.length < 6) {
  oError.innerHTML = "密码请输入6-20位字符"
  isError = false;
  return;
 }
 window.alert("登录成功")
}

HTML-Code der Registrierungsschnittstelle: 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>欢迎你，请先登陆！</title>
 <script type="text/javascript" src="../static/jsp/lx.js"></script>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<p id="container" style="width: 400px" align="center">
 <p id="header" style="background-color: aquamarine">
  <h2 align="center">注册</h2>
 </p>
 <p id="content">
  <p align="center">账号:
   <input id="uname" type="text" name="user" placeholder="账号首字符为字母">
  </p>
  <p align="center">密码:
   <input id="upass" type="password" name="psw" placeholder="请输入密码">
  </p>
  <p id="error_box"><br></p>
  <br>

  <button onclick="fnLogin()" class="btn btn-info">注册</button>
 </p>
 <p style="background-color: aquamarine">
  <i>版权信息@</i>
 </p>
</p>
</body>
</html>

Die laufenden Ergebnisse sind wie folgt:

Verwandte Empfehlungen:

Beispiel für das Teilen einer grundlegenden Anleitung zur JavaScript-Anmeldeüberprüfung

Detaillierte Erläuterung der Ajax-Methode zur Implementierung einer schönen und sicheren Anmeldeschnittstelle

CSS- und JS-Tutorial zur Implementierung einer Popup-Login-zentrierten Schnittstelle

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die js-Implementierung der Anmelde- und Registrierungsschnittstelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css ajax html JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detailliertes Beispiel für den richtigen Umgang mit dem leeren Display nach der Vue-VerpackungNächster Artikel：Detailliertes Beispiel für den richtigen Umgang mit dem leeren Display nach der Vue-Verpackung

In Verbindung stehende Artikel

Mehr sehen