在用户登录页面我们通常需要过滤用户的一些输入,如空格输入或者什么都不输等等,并在用户输入完成时给出红色字的错误提示,在这里分享一些自己写的代码。
首先在login.jsp页面中会有一个用户名和密码的提交表单:
在这里说说输入框的几个属性:
class是CSS里面的样式,不用管。onBlur属性是输入框失去焦点时触发的事件,onfocus属性是输入框获得焦点时的触发事件。οnkeyup="this.value=this.value.replace(/[,]/g,'')"表示在输入用户名和密码时不能输入空格和英文状态下的逗号,如果输入的话将会被自动替换。
接下来说说标签,标签用于显示输入错误后的红色提示字。
最后说说JS的代码:
var flag;//判断是否可以提交
var userFlag=false;
var passFlag=false;
function checkUser(){ //判断用户名输入是否为空,如果为空给出错误提示
var userElement=document.getElementById("user"); //获得user输入标签
var userNullTip=document.getElementById("userNullTip"); //获得提示标签
if(userElement.value.length==0){
userNullTip.innerHTML="用户名不能为空!";//设标签红色提示内容
}
else{
userFlag=true;
}
}
function focusUser(){
var userNullTip=document.getElementById("userNullTip");
userNullTip.innerHTML=""; //隐藏红色提示文字
userFlag=false;
}
function checkPassword(){
var passElement=document.getElementById("password");
var passNullTip=document.getElementById("passwordNullTip");
if(passElement.value.length==0){
passNullTip.innerHTML="密码不能为空!";//设置红色提示内容
}
else{
passFlag=true;
}
}
function focusPassword(){
var passNullTip=document.getElementById("passwordNullTip");
passNullTip.innerHTML="";
passFlag=false;
}
function submitFlag(){
if(userFlag==true&&passFlag==true){ //如果用户名和密码输入都不为空,则允许提交
flag=true;
}
else{
if(userFlag==false){
var userNullTip=document.getElementById("userNullTip");
userNullTip.innerHTML="用户名不能为空!";//设置红色提示内容
}
if(passFlag==false){
var passNullTip=document.getElementById("passwordNullTip");
passNullTip.innerHTML="密码不能为空!";//设置红色提示内容
}
flag=false;
}
return flag;
}
最终的运行结果如下:
Author:事始
Sign:只要你还在尝试,就不算失败。