前言
前面用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;
}
就这样，登录界面完善就做好了。
总结
刚刚接触js，可能会比较生疏，比如某一些单词容易拼错会导致运行不出来，这里新掌握一个技巧，如果有效果出不来可以在网页上按F12,在控制台中就能看到错误信息，也有可能是元素获取不到，可以在控制台中使用console.loig()函数查看元素是否拿到。学习前端的路还很长，继续补充能量吧！
