Maison > Article > interface Web > js implémente l'interface de connexion et d'enregistrement

js implémente l'interface de connexion et d'enregistrement

不言original: 2018-04-02 16:23:348014parcourir

Cet article présente principalement en détail l'implémentation js de l'interface de connexion et d'enregistrement, qui a une certaine valeur de référence. Les amis intéressés peuvent se référer à

HTML+CSS+ pour compléter la page de connexion et d'enregistrement. Les contrôles des éléments de saisie incluent :

Nom d'utilisateur 6 à 12 chiffres

La première lettre ne peut pas être un chiffre

Ne peut contenir que des lettres et des chiffres

Mot de passe 6- 12 chiffres

Si les deux mots de passe sur la page d'inscription sont cohérents

code html :

<!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>

code css ：

*{
 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;
}

Code javascript :

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("登录成功")
}

Code html de l'interface d'inscription :

<!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>

Les résultats en cours d'exécution sont les suivants :

Recommandations associées :

Exemple d'explication détaillée de l'implémentation js de l'interface de connexion et d'enregistrement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment ajax demande-t-il un numéro de téléphone mobile à la base de données pour vérification et renvoie la valeur d'état des données ?Article suivant：Comment ajax demande-t-il un numéro de téléphone mobile à la base de données pour vérification et renvoie la valeur d'état des données ?

Articles Liés

Voir plus