javascript实现登陆验证 js实现登陆界面验证

转载

墨色天香 2024-02-03 22:05:21

文章标签 javascript实现登陆验证输入框提示信息表单 文章分类 JavaScript 前端开发

前言

前面用css做了注册页面，要了解点击查看->注册页面平时我们在网上注册时如果有没有填的会有提示信息，如果两次输入的密码不一致也会出现提示信息，思路现在就写一下这个提示信息的效果是怎么实现的，顺便理解js。

正文

提示信息的这种需要用到javascript（简称js）脚本语言，这里呢就这个项目，可以好好理解一下js的用法。js脚本语言的书写也是有两种写法的，同CSS一样，可以写到内部，也可也写到外部（然后再导入）即可，js语句也和css语句放置的位置一样。都是放到头部标签内，下面就来看一下这个小项目。
整体思路：先要判断邮箱输入框是否为空或者是否为默认值，那么就要获取到输入框的值，再通过获取元素值的判断，从而实现提示信息的效果。

1.因为我们要获取到input的输入值，所以是对表单操作，这里给表单上添加onsubmit事件，表示在提交表单时调用js中的函数。这里给在函数之前加上return是将函数的返回值赋值给onsubmit，由下文知当返回值为false时会终止执行表单操作，可见其return的重要性。

<form class="register " οnsubmit="return chk();">/*调用js中的chk()函数*/

2.判断是否填写邮箱地址，要获取到邮箱输入框的值，可以通过名字name来获取，要保证邮箱输入框有自己的name，代码如下;

<input type="email" class="register-input" name="emailname" placeholder="请输入邮箱地址">

准备工作做足，然后就可以开始写js了，在头部标签内写js；

<script type="text/javascript">/*javascript类型*/
        function chk() { //自定义chk函数
            //判断邮箱是否填写
            var inpuser = document.getElementsByName("emailname")[0];/*获取邮箱输入框的对象并赋值给inpuser*/
            if (inpuser.value == "" || inpuser.value == "请输入邮箱地址") {/*判断是否为空或者是否为默认值*/
                alert("请输入邮箱");/*显示提示对话框*/
                return false;/*返回false*/
            }
        }

注：1.var，在js中变量可以声明也可不声明，这里用var是声明inpuser为全局变量。
       2.document.getElementsByName()方法可返回带有指定名称的对象的集合，这里可以理解成获得邮箱输入框的对象。
       3.[0]表示获取页面上第一个name为"email"的对象。（因为可能会存在相同的name）
       4.inpuser.value 表示inpuser这个对象的数据成员value。

2.在验证密码是是否填写的道理和验证邮箱是一致的，只有输入密码才能验证密码是否一致，首先应该判断一下是否填写密码，这里呢写的脚本代码还是在chk（）函数中写，因为这几个输入框都是在一个表单里面操作的，且函数是在表单中调用。
a.给密码输入<input>添加name “passwd”

<input type="password" class="register-input" name="passwd" placeholder="请输入密码">

b.在chk（）函数中写密码输入框的脚本代码。

var ipasswd = document.getElementsByName("passwd")[0];
    if (ipasswd.value == "" || ipasswd.value == "请输入密码")
            {
                alert("请输入密码");
                return false;
            }

3.验证两次输入的密码是否一致。
a.首先应该给验证密码输入框添加name “passwdfn”.

<input type="password" class="register-input"  name="passwdfn" placeholder="请再次输入密码">

b.在chk（）函数中写验证密码输入框的脚本代码，判断两个密码是否一致即可。

var ipassdfn = document.getElementsByName("passwdfn")[0];
   if (ipasswd.value != ipassdfn.value)
            {
                alert("两次密码不一致");
                return false;
            }

就这样，登录界面完善就做好了。