网页|在登录注册时如何判断输入信息是否正确
问题描述
当我们在很多的网站或者APP上面注册时，我们一般会用电话号码或者邮箱来注册，有的人可能输入了不符合规范的电话号码或者邮箱系统就会自动提示您输入的不是电话号码或者邮箱，那么这是怎么做到的呢？我们来简单的了解一下这个验证的原理，我们以邮箱为例。
解决方案
当我们在一个网站登录或注册时需要我们输入邮箱来进行登录或者注册时，我们输入了不规范的邮箱地址就会提示我们相应邮箱地址所缺失的东西例如我们一个简单的登录页面。
图2.1 页面展示
我们需要在这个页面中输入邮箱和密码进行登录操作，今天我们就简单的判断邮箱是否正确就可以了，我们生活中有许许多多的邮箱地址，但是我们怎么去判断邮箱地址是否正确呢？我们会发现邮箱地址都有一个共同之处，那就是在所有的邮箱地址当中都含有“@”符号和“.”这个符号，所以我们在判断邮箱地址是否正确的时候我们就只需要判断我们所输入的邮箱当中是否包含这两个符号就可以了。先来看一下HTML代码：
<form action="success.html" method="get" onsubmit="return check()"> email:<input type="text" id="email"/><br /> 密码：<input type="password" /><br /> <input type="submit" value="登陆" onclick="check()"/> </form> |
|---|
通过HTML代码我们可以知道我们要获取邮箱输入框中的值，然后再对获取的值进行判断是否符合邮箱的标准。下面我们来看一下JavaScript代码：
<script type="text/javascript"> var email = document.getElementById("email"); function check(){ if (email.value == ""){ alert("eamail不能为空!") return false; } var value_email = email.value; if(value_email.indexOf("@")== -1){ alert("email格式不正确！\n必须包含@"); return false; } /*var value_email = eamil.value;*/ if(value_email.indexOf(".")== -1){ alert("email格式不正确！\n必须包含.") return false; }return true; } </script> |
|---|
通过代码中我们首先是获取email输入框中的值，然后判断其中的值不能为空，否则就会弹出邮箱不能为空的提示。
图2.2 效果展示
如果其中的值不为空，我们就对获取的值进行判断，我们通过indexOf方法判断获取的值中是否含有“@”符号，否则弹出提示：
图2.3 效果展示
如果获取到的值既不为空也含有“@”符号，我们就判断输入的东西是否含有“.”这个符号。
判断的方法和判断“@”符号的方法是一样的。
图2.4 效果展示
这样我们就可以登录成功了，当然这只是一个简单的表单验证，后面还有很多其他的验证但大概原理都是一样的。
结语
我们很多的判断原理都是一样的，但可能方法会不尽相同，所以只要我们理解了相应的原理就会很简单。在写代码的过程中一定要心细，否则就很容易出错。
END
实习编辑 | 王楠岚
责 编 | 桂 军