jsp中表单提交注册信息,提交信息之前先进行正则匹配,验证用户输入的信息是否符合规范要求。
今天写了一个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]\[email protected][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。