基于javascript的用户登录页面验证

最新推荐文章于 2024-03-23 18:41:11 发布
最新推荐文章于 2024-03-23 18:41:11 发布
阅读量784 收藏
点赞数
分类专栏： javascript 文章标签： javascript function generator input html action

1，用户名不能包含空格，第一个字母不能为数字，长度控制
2，密码和验证码要相同，不能为空，等等，一些很基本的功能，但是确实挺烦人的。
      javascript调试起来确实比较麻烦。

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language = "javascript">

 


function ger_code(code_length) {
  var rand_aa="";
  var code=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J",
  "K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h",
  "i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","!","@","#","$","%","&",
  "*","(",")","-","_","|","?","/");
  var code_Num=code.length;  //数组长度
  for(i=0;i<code_length;i++)
   {
     var ran_ss=parseInt(Math.random()*code_Num);
    rand_aa+=String(code[ran_ss]);
   }
document.write("&nbsp;验证码&nbsp;<input type=text name=check_code size="+code_length+" value="+rand_aa+" class=blank_bg maxsize=5 readonly=true>");
}

function subTest(){

var name = document.testForm.userName.value;
var pass = document.testForm.userPassword.value;
var rePass = document.testForm.reUserPassword.value;
var check = document.testForm.checkCode;

if(name.length > 10 || name.length < 4){
        alert("用户名长度必须大于等于4,小于等于10");
        testForm.userName.focus();
        return false;
}else if(isFirst()){
    alert("用户名头字母不能为数字");
    testForm.userName.focus();
    return false;
}else if(isSpace()){
    alert("用户名只能包含字母,数字,下划线'_',以及'-'!");
    testForm.userName.focus();
        return false;
}
else if(pass.length < 1){
    alert("请输入密码");
    testForm.userPassword.focus();
    return false;
}else if(pass != rePass){
    alert("两次密码输入不相符合!");
    testForm.reUserPassword.focus();
    return false;
}
else if(check.value != testForm.check_code.value){
        alert("验证码不正确");
        testForm.checkCode.focus();
        return false;
}
    return true;
}

function isSpace(){

    var name = document.testForm.userName.value.split("");
   
    for(i = 0; i < name.length; i++){
        if(name[i] == " "){
            return true;
        }else if( !((name[i] < "z" && name[i] > "a") || (name[i] < "Z" && name[i] > "A")
        || name[i] == "-" || name[i] == "_" || (name[i] < "9" && name[i] > "0"))){
            return true;
        }       
    }
    return false;
}


function isFirst(){
    var name = document.testForm.userName.value.split("");
    if(name[0] < "9" && name[0] > "0"){
        return true;
    }
    return false;
}

</script>

<style type=text/css>
.blank_bg {
     background-color:#CC0000;
     color:#FFFF00;
     border-width:0px;
}
</style>

</HEAD>

<BODY>
<FORM action = "my2.htm" name = "testForm" method = "post" onSubmit="return subTest()">

<TABLE align = "center">

<TR>
    <TD>用户名</TD>
    <TD><INPUT TYPE="textarea" name = "userName" size = "10" ></TD>
    <TD><font size = "5" color = "red">*</font>长度大于4,小于10</TD>
</TR>

<TR>
    <TD>密码</TD>
    <TD><INPUT type = "password" name = "userPassword"></TD>
    <TD><font size = "5" color = "red">*</font>必填</TD>
</TR>

<TR>
<TD>验证密码</TD>
<TD><INPUT type = "password" name = "reUserPassword"></TD>
<TD><font size = "5" color = "red">*</font>必填</TD>
</TR>

<TR>
<TD>验证码</TD>
<TD><INPUT type = "textarea" name = "checkCode"></TD>
<TD><SCRIPT language = "JavaScript">ger_code(5);</SCRIPT><font size = "5" color = "red">*</font>必填</TD>
<TD></TD>
</TR>

<TR>
<TD><DIV ALIGN = "CENTER"><INPUT TYPE = "submit", VALUE = "登陆"  ></DIV></TD>
<TD><DIV ALIGN = "CENTRE"><INPUT TYPE = "reset" ></TD>
</TR>

</TABLE>

</FORM>

</BODY>
</HTML>

hellodsr
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现登录界面验证码生成及验证
晓晓@程序媛的博客
10-11 1万+
今天按组长要求，实现了前端登录界面验证码生成及识别功能，确保网站的安全性，无聊之余，总结今天的工作内容。下面是部分代码的讲解，CheckCodeAction.java为后台验证码的生成和验证。
Javascript实现具有验证功能的页面登录
qq_64314976的博客
08-18 4259
使用JS的函数功能，获取屏幕的宽度和高度，并实现居中效果。登录区域设置一定的宽度和高度；打开登录页面时，登录区在浏览器水平、垂直方向上都居中。登录过程中会有相应的提示功能，输入正确后会显示登录成功，否则失败。...
使用Javascript进行客户端输入验证
cunchi8090的博客
07-18 976
Html Form is the main way for users to interact with server side. It can bring a lot of functionalities to web sites such as searching, data storing and different kinds of calcula...
JS登录检验注册信息是否正确
最新发布
Binyu_Z的博客
03-23 613
二、登录界面，其他没变，加了表单主体部分，另外添加了js 通过点击登录来实现信息核验，用到的是localstorage,验证成功后自动清除，localstorage.remove。三、这里是注册界面，界面上相比登录界面就多了个联系方式，而js这里来接受用户输入的信息，并将它存起来，带到登录界面里进行比较验证。一、index首页，两个简单的按钮 穿插了js代码来实现动态效果，比如点击登录进入登录页面，同下。总结，以上就是通过localstorage来进行简单数据的存储和读取。
javascript页面验证数据的合法性
qq_40956679的博客
10-30 3877
javascript页面验证数据的合法性 &lt;script language="javascript"&gt; function on_submit() { //验证数据的合法性 if (form1.username.value == "") { alert("用户名不能为空，请输入用户名！"); return false; } if (form1.userpas...
JavaScript实现简单登录验证（密码写固定）
执手天涯@的博客
10-12 5404
1、准备开发软件（Vs Code） 下载地址：https://vscode.en.softonic.com/ 基本插件使用教程：https://zhuanlan.zhihu.com/p/113222681 2、书写页面 login 页面 index.html页面 3、原生js实现表单验证 1、基本思路图解 2、JavaScript代码 ...
基于javascript的Form表单验证
10-20
总结来说，基于JavaScript的表单验证涉及到HTML、CSS和JavaScript的结合使用，包括事件监听、正则表达式、数据校验、样式控制等多个方面。通过合理地设计和实现这些功能，可以构建出高效、友好的用户界面，提升用户...
基于JavaScript实现带数据验证和复选框的表单提交
10-19
在本文中，我们将深入探讨如何使用JavaScript来实现一个带有数据验证和复选框的表单提交功能。这个功能主要用于确保用户在提交表单前至少选择了一项，并且输入的数据是有效的。以下是一些关键知识点： 1. **HTML ...
基于JavaScript实现幸运抽奖页面
10-18
在本教程中，我们将探讨如何使用JavaScript来创建一个简单的幸运抽奖页面。这个页面的主要功能是让用户输入他们的会员卡号，然后通过随机数匹配会员卡号的特定位数来决定是否中奖。 首先，HTML结构非常简洁，包含一...
javascript.html实现表单验证
03-16
虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 [1] JavaScript在...
jsp基于XML实现用户登录与注册的实例解析（附源码）
10-23
在本文中，我们将深入探讨如何使用JavaServer Pages (JSP) 和Extensible Markup Language (XML) 实现用户登录与注册功能。首先，我们要明白XML是一种轻量级的数据存储格式，常用于替代简单数据库来存储结构化数据。...
用js进行用户登录界面验证
04-03
如何用js来验证用户名，密码，email等
JavaScript注册登录
12-16
JavaScript注册登录界面
js实现登录验证
weixin_42610671的博客
01-04 708
为了实现登录验证，你可以在登录表单中包含一个提交按钮，然后在按钮的点击事件的处理函数中进行登录验证。 首先，在处理函数中，你可以获取表单中的用户名和密码的值。然后，你可以使用这些值与你存储的正确的用户名和密码进行比较。如果用户名和密码都正确，则可以认为登录已成功，并将用户重定向到受保护的页面。如果用户名或密码不正确，则可以显示一条错误消息，提示用户输入正确的信息。 这是一个简单的登录验证的例子： ...
js登录验证
qq_44376244的博客
06-09 3095
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
验证登录账号和密码的输入正确性（JavaScript实现）
weixin_45631954的博客
05-19 8067
代码 <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <form> 账号 <input type="text" name="username"id="username" style="height: 28px;"><br> 密码
简单JavaScript验证｜用户登录界面中加入简单的验证
匿名用户小易
12-05 1539
简单JavaScript验证｜用户登录界面中加入简单的验证 用户登录界面中加入简单的验证 (假设数据库正确用户名、密码组合包括两个：tommy/123456、louis/987654321)。 验证内容包括： （1）用户名为空或长度小于5位时弹出提示对话框； （2）登录密码为空或长度小于6位时弹出提示对话框； （3）用户名、密码与数据库中核对正确后，显示登录成功提示对话框。 提示： （1）自定义c...
js html完整地登录验证界面,详解JS实现系统登录页的登录和验证
weixin_32307599的博客
06-05 749
这篇文章用JS显示表单的登录以及验证和对键盘的监听，这里有两种方法，一种是无需用户验证直接登录，一种是需要账户密码匹配才可登录。1. html代码登 录2.CSS样式.content{padding:0 auto;margin: 0 auto;height: 450px;width: 100%;background: url(../Image/Login-Img/login_bg.jpg) no-...
使用原生js写一个简单的注册登录页面
热门推荐
apple_61973423的博客
08-15 2万+
使用JavaScript写的登录注册页面
写一段验证严格登录的Javascript代码
05-05
以下是一段基于前端的严格登录验证的Javascript代码示例： ```javascript function validateLogin() { var username = document.getElementById("username").value; var password = document.getElementById(...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值