今天写了一个jsp的注册页面，用户每次输完一个输入框的内容，就会进行验证用户输入信息的格式是否符合规范，符合规范之后表单才进行提交，不符合规范则提醒用户按要求输入信息。直到用户输入的每个信息都符合要求，表单才提交，才进行验证。避免了提交之后，我还需要对信息提前进行一定的判断，是否符合要求，才进行数据库的插入操作。
说了这么多，还是先说一说我的思路吧。
1.首先我的页面有五个框，第一个框是用户的昵称，第二个框是用户的账号，第三个框是用户的邮箱，第四个框是用户的密码，第五个框是再次确认密码。
2.我的每个Input里面都加入了一个属性，onblur=""
blur英文翻译过来就是“模糊不清的意思”也就是失去焦点的意思。
顾名思义也就是当鼠标的焦点移出输入框的范围的时候，触发并且调用里面的js函数。
<input type="text" name="name" id="name" onblur="checkName()">
这个属性作用和说明如下：
onblur 属性在元素失去焦点时触发。
onblur 常用于表单验证代码（例如用户离开表单字段）。
也就是说每次用户输入完信息之后，鼠标焦点离开输入框的时候，会调用一次checkName（）方法。这个方法是采用js写的。然后我们可以在这个方法里面获取我们的输入信息，进行正则匹配，判断用户输入的信息是否符合要求。
3.当每个输入框的内容都检查符合我们规范要求的时候，我们可以在表单头加上一个属性onsubmit=“”
<!-- 表单提交的时候是会触发onsubmit事件的，如果onsubmit事件的方法返回是true，那么该表单允许提交，如果返回的是false，该表单不允许提交。-->。所以我们还应该在js中多写一个方法来进行判断最终表单是否允许。
好的，下面就开始实验一下吧。
用到的知识有
1.input的onblur属性。
2.js函数和正则表达式。
3.form的onsubmit属性。
4.如何获取标签元素，修改他们的class。
首先给大家展示一下我的页面框。
首先展示一下进入网页以后的页面输入框
然后点击每个输入框之后，不输入内容。输入框的下面会给出错误的提示信息。点击“注册”表单并不会进行提交。
1.然后接下来我们看一下表单代码的部分，先看表单的代码，这里为了简洁起见，我删除了一些多余的内容，留下重点。
统一说明：以下的 id=“对应输入框的内容名称”，id=“对应输入框的内容名称class”，id=“对应输入框的内容名称span”
所设置的id都是为了给js函数调用，获取到里面的值，然后根据输入的内容是否符合标准，进行正确或者错误的消息显示。
在这里，如果用户输入的信息符合正则匹配标准，则错误的信息为“”空，并且输入框的左边显示一个绿色打钩的按钮，如果用户输入的信息不符合我们的正则匹配的标准，则输入框的底下输出错误提示消息，并且输入框的左边显示一个红色的打叉按钮。
注明：一下显示红色字体的内容都是js函数会用到的。
<input type="hidden" name="form" value="true"/>
2.接下来看一下对应的js函数是如何获取这些id，以及如何利用这些id的。
//1.检查用户名
function checkName(){
var name = document.getElementById("name").value;
var spanNode = document.getElementById("namespan");
//用户名的规则： 昵称的长度为1-15，包含任意的字母、数字、中文，不可以使用其他符号
var reg = /^([\u4e00-\u9fa5]|[a-zA-Z0-9]){1,15}$/i;
if(reg.test(name)){
//符合规则
spanNode.innerHTML = "".fontcolor("green");
document.getElementById("nameclass").className = "icon ticker";
return true;
}else{
//不符合规则
spanNode.innerHTML = "昵称的长度为1-15，包含任意的字母、数字、中文，不可以使用其他符号".fontcolor("red");
document.getElementById("nameclass").className = "icon into";
return false;
}
}
//2.检查密码
function checkPassword(){
var password = document.getElementById("password").value;
var spanNode = document.getElementById("passwordspan");
//密码的规则： 6-16，包含任意的字母、数字，不可以使用其他符号
var reg = /^([a-zA-Z0-9]){6,16}$/i;
if(reg.test(password)){
//符合规则
spanNode.innerHTML = "".fontcolor("green");
document.getElementById("passwordclass").className = "icon ticker";
return true;
}else{
//不符合规则
spanNode.innerHTML = "密码的长度为 6-16，包含任意的字母、数字，不可以使用其他符号".fontcolor("red");
document.getElementById("passwordclass").className = "icon into";
return false;
}
}
//3.检查邮箱
function checkEmail(){
var email = document.getElementById("email").value;
var spanNode = document.getElementById("emailspan");
//编写邮箱的正则
var reg = /^[a-z0-9]\w+@[a-z0-9]+(\.[a-z]{2,3}){1,2}$/i;
if(reg.test(email)){
//符合规则
spanNode.innerHTML = "".fontcolor("green");
document.getElementById("emailclass").className = "icon ticker";
return true;
}else{
//不符合规则
spanNode.innerHTML = "邮箱格式不正确，请重新填写！".fontcolor("red");
document.getElementById("emailclass").className = "icon into";
return false;
}
}
//4.检查两次输入的密码是否一致
function checkSame(){
var password = document.getElementById("password").value;
var password2 = document.getElementById("password2").value;
var spanNode = document.getElementById("passwordspan2");
//密码的规则： 6-16，包含任意的字母、数字，不可以使用其他符号
var reg = /^([a-zA-Z0-9]){6,16}$/i;
//确认密码输入符合规则
if(reg.test(password2)){
//符合规则
if(password==password2){
spanNode.innerHTML = "".fontcolor("green");
document.getElementById("passwordclass2").className = "icon ticker";
return true;
}else{
spanNode.innerHTML = "两次输入的密码不一致！".fontcolor("red");
document.getElementById("passwordclass2").className = "icon into";
return false;
}
}
//确认输入密码不符合规则
else{
spanNode.innerHTML = "密码的长度为 6-16，包含任意的字母、数字，不可以使用其他符号".fontcolor("red");
document.getElementById("passwordclass2").className = "icon into";
return false;
}
}
//5.检查账号是否符合输入规则
function checkId(){
var id = document.getElementById("id").value;
var spanNode = document.getElementById("idspan");
//账号的规则： 6-16，包含任意的字母、数字，不可以使用其他符号
var reg = /^([a-zA-Z0-9]){6,16}$/i;
if(reg.test(id)){
//符合规则
spanNode.innerHTML = "".fontcolor("green");
document.getElementById("idclass").className = "icon ticker";
return true;
}else{
//不符合规则
spanNode.innerHTML = "账号的长度为 6-16，包含任意的字母、数字，不可以使用其他符号".fontcolor("red");
document.getElementById("idclass").className = "icon into";
return false;
}
}
//6.检查用户所有的输入的所有是否符合规则
function checkAll(){
var email = checkEmail();
var name = checkName();
var id = checkId();
var password = checkPassword();
var same = checkSame();
if(email&&name&&id&&password&&same){
return true;
}else{
return false;
}
}
这里的reg是根据个人自己的规则设定出来的正则表达式。每个人可以根据不同的需求修改。
3.我们在看一下form的onsubmit属性。
<form action="regis.jsp" method="post" onsubmit="return checkAll()">
<!-- 表单提交的时候是会触发onsubmit事件的，如果onsubmit事件的方法返回是true，那么该表单允许提交，如果返回的是false，该表单不允许提交。-->
检查用户所有的输入的所有是否符合规则
function checkAll(){
var email = checkEmail();
var name = checkName();
var id = checkId();
var password = checkPassword();
var same = checkSame();
if(email&&name&&id&&password&&same){
return true;
}else{
return false;
}
}
也就说这个这个onsubmit是为了保证用户输入的每个框都符合规则输入，如果有其中之一不符合规则，那么表单就会拦截下来，不会让他提交给目的页面进行处理，省下了很多目的页面需要进行逻辑处理的工作量。
4.如何获取标签元素，修改他们的class。
在这里有一个要注意的要点就是，修改class
document.getElementById("idclass").className = "icon into";
这里用的是className而不是class，因为在这里面class也是一个关键字，只能通过.className来改变标签元素的class。