最近在做一个简单的注册页面，其中有用户名，帐户（通过邮箱注册），设置密码和密码的确认，还有注册的身份。在用户进行输入邮箱时，我们就需要检验用户输入的邮箱格式是否是正确，如果不正确我们就需要提示用户输入格式的错误，在确认密码的过程中就是再一次输入设置的密码，同时我们也要检验重新输入的密码是否与设置密码时输入的密码一样，不一样时就要提示用户确认的密码与设置的密码不一致。
我先贴一下我的代码（js部分）：
1、检验邮箱的格式：function mail(){ var mail=document.getElementById("account");//id为input的，获取input这个节点 var re=/^[\w-]+(\.[\w]+)*@([\w-]+\.)+[a-zA-z]{2,7}$/;//正则表达式，邮箱格式 //邮箱内容为空 if(mail.value==""){ var child=mail.parentNode.lastChild; if(child.innerHTML!="邮箱不能为空"||child.innerHTML=="邮箱格式不正确") { if(child.innerHTML=="邮箱格式不正确"){ mail.parentNode.removeChild(child); } var newNode=document.createElement("small"); newNode.innerHTML="邮箱不能为空"; newNode.style.color="red"; mail.parentNode.appendChild(newNode); } } //不符合邮箱格式 else if(!mail.value.match(re)){ var child=mail.parentNode.lastChild; if(child.innerHTML!="邮箱格式不正确"||child.innerHTML=="邮箱不能为空") { if(child.innerHTML=="邮箱不能为空"){ mail.parentNode.removeChild(child);//如果已经插入了提示用户的语句就把它删除重新插入一个提示语句 } var newNode=document.createElement("small"); newNode.innerHTML="邮箱格式不正确"; newNode.style.color="red"; mail.parentNode.appendChild(newNode); } } }
2、确认密码：
（1）//检测是否在设置密码后确认密码 function putPassword(){ var password1=document.getElementById("password"); var password2=document.getElementById("confirmPassword"); var child=password2.parentNode.lastChild; if(password1.value==""){ if(child.innerHTML!="请先设置密码"){ if(child.innerHTML=="密码不一致"){ password2.parentNode.removeChild(child); } var newNode=document.createElement("small"); newNode.innerHTML="请先设置密码"; newNode.style.color="red"; password2.parentNode.appendChild(newNode); } } }
（2）//检验再次输入的密码是否与第一次相同 function funpassword(){ var password1=document.getElementById("password"); var password2=document.getElementById("confirmPassword"); var child=password2.parentNode.lastChild; if(password1.value==password2.value&&password1.value!=""){ if(child.innerHTML=="密码不一致"||child.innerHTML=="请先设置密码"){ password2.parentNode.removeChild(child); } } if(password1.value!=password2.value&&password1.value!=""){ if(child.innerHTML=="密码不一致"||child.innerHTML=="请先设置密码"){ password2.parentNode.removeChild(child); } var newNode=document.createElement("small"); newNode.innerHTML="密码不一致"; newNode.style.color="red"; password2.parentNode.appendChild(newNode); } }
（html部分）1、<input type="text" id="account" placeholder="邮箱" onblur ="mail()">//input 需要一个鼠标事件，当鼠标点击输入框后离开就会触发mail（）事件的发生。
2、<input type="password" name="confirmPassword" id="confirmPassword" placeholder="再次输入密码" οnblur="funpassword()" οnmοusedοwn="putPassword()">//当鼠标在确认密码框点击的时候就会触发检验设置密码框是否为空的事件。
注意：获取input的值时需要使用document.getElementById(id).value;使用value属性。在获取其他元素的值时需要使用innerHTML属性，该属性也可以进行元素内容的设置。
下面是效果图：
