87,902
社区成员
发帖
与我相关
我的任务
分享100分求助一个关于表单验证的问题
最近在自学JavaScript表单验证，单个输入框的验证都搞定了，最后卡在onsubmit提交时验证这边了，不知道哪里出错了，大神们帮忙看看，以下console.log(state)结果都是true，答疑解惑，谢谢了！
下面就是我的代码：
下面就是我的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* {margin:0; padding:0;}
.pass-label {height:42px; width:80px; line-height:42px; text-align:right; float:left; clear:both; font-size:14px; font-weight:bold; margin-right:10px; font-family:"宋体";}
input {height:40px; line-height:40px; float:left; border:1px solid #ccc; font-size:13px; width:300px; padding-left:5px;}
p:after {content:""; visibility:hidden; display:block; font-size:0; height:0; clear:both;}
p {margin-bottom:15px;}
.regbtn {height:50px; width:307px; font-size:15px; font-weight:bold; background:#3f89ec; color:#fff; margin-left:90px;}
.regbtn:hover {background:#4490f7;}
p span {line-height:42px; margin-left:407px;}
.pass-error {color:red;}
.pass-succ {color:green;}
.pass-tip {color:#b4b4b4;}
</style>
<script>
//仿jQuery选择器
function $(selector, content){
content = content || document;
var sTag = selector.charAt(),
arr = [],
allName = content.getElementsByTagName("*");
if(sTag === "#"){
selector = selector.substring(1);
return content.getElementById(selector);
}else if (sTag === "."){
selector = selector.substring(1);
for(var i=0;i<allName.length;i++){
var reg=new RegExp("\\b"+selector+"\\b","i");
if(reg.test(allName[i].className))arr.push(allName[i]);
}
return arr;
}
else return content.getElementsByTagName(selector);
}
/*对象，提示，位置，成功，错误，提示信息，成功信息，错误信息，回调函数, 返回参数*/
function check (obj, aTip, num, aSucc, aError, sTip, sSucc, sError, fnCallback, a){
obj.onfocus=function(){
aTip[num].style.display="block"; aTip[num].innerHTML=sTip;
aSucc[num].style.display="none"; aSucc[num].innerHTML="";
aError[num].style.display="none"; aError[num].innerHTML="";
};
obj.onblur=function(){
aTip[num].style.display="none"; aTip[num].innerHTML="";
if(fnCallback(this.value)){
aSucc[num].style.display="block"; aSucc[num].innerHTML=sSucc;
aError[num].style.display="none"; aError[num].innerHTML="";
}else
{
aSucc[num].style.display="none"; aSucc[num].innerHTML="";
aError[num].style.display="block"; aError[num].innerHTML=sError;
}
};
if(a=="click")
obj.onblur();
}
window.onload=regs;
function regs(a){
var state=true;
var oUserName=document.getElementsByName("username")[0],
oPwd=document.getElementsByName("pwd")[0],
oConfirmPwd=document.getElementsByName("confirmpwd")[0],
oEmail=document.getElementsByName("email")[0],
aTip=$(".pass-tip"),
aSucc=$(".pass-succ"),
aError=$(".pass-error");
check (
/*对象，提示，位置，成功，错误，提示信息，成功信息，错误信息，回调函数, 返回参数*/
oUserName, aTip, 0, aSucc, aError, "请输入3-20位用户名，英文、字母或下划线", "输入正确", "输入错误",
function(val){
if(val.match(/^\w{3,20}$/)){return true;}else{state=false; return false;}
}, a);
console.log(state);
check (
oPwd, aTip, 1, aSucc, aError, "请输入6-20位密码，英文和数字", "输入正确", "输入错误",
function(val){
if(val.match(/^[0-9A-Za-z]{6,20}$/)){return true;}else{state=false; return false;}
}, a);
console.log(state);
check (
oConfirmPwd, aTip, 2, aSucc, aError, "请再次输入密码", "输入正确", "密码不一致",
function(val){
if(oConfirmPwd.value.match(/^[0-9A-Za-z]{6,20}$/) && oConfirmPwd.value == oPwd.value){return true;}else{state=false; return false;}
}, a);
console.log(state);
check (
oEmail, aTip, 3, aSucc, aError, "请输入邮箱地址", "输入正确", "邮箱格式不正确",
function(val){
if(val.match(/^[a-z0-9]{1}\w+@\w+\.\w+[a-z0-9]{1}$/i)){return true;}else{state=false; return false;}
}, a);
console.log(state);
return state;
};
</script>
</head>
<body>
<form action="reg.php" method="post" style="margin:20px 0 0 20px;" onsubmit="return regs("click");">
<p>
<label class="pass-label" for="username">用户名: </label>
<input type="text" name="username" value="" placeholder="请输入用户名">
<span class="pass-error pass-error-username" style="display:none;"></span>
<span class="pass-succ pass-succ-username" style="display:none;"></span>
<span class="pass-tip pass-tip-username" style="display:none;"></span>
</p>
<p>
<label class="pass-label" for="pwd">密码: </label>
<input type="password" name="pwd" value="" placeholder="请输入密码">
<span class="pass-error pass-error-pwd" style="display:none;"></span>
<span class="pass-succ pass-succ-pwd" style="display:none;"></span>
<span class="pass-tip pass-tip-pwd" style="display:none;"></span>
</p>
<p>
<label class="pass-label" for="confirmpwd">确认密码: </label>
<input type="password" name="confirmpwd" value="" placeholder="确认密码">
<span class="pass-error pass-error-confirmpwd" style="display:none;"></span>
<span class="pass-succ pass-succ-confirmpwd" style="display:none;"></span>
<span class="pass-tip pass-tip-confirmpwd" style="display:none;"></span>
</p>
<p>
<label class="pass-label" for="email">邮箱: </label>
<input type="text" name="email" value="" placeholder="请输入邮箱">
<span class="pass-error pass-error-email" style="display:none;"></span>
<span class="pass-succ pass-succ-email" style="display:none;"></span>
<span class="pass-tip pass-tip-email" style="display:none;"></span>
</p>
<p>
<input class="regbtn" type="submit" value="注册">
</p>
</form>
</body>
</html>
...全文
请发表友善的回复…
发表回复
cocotsau 2016-04-05
- 打赏
- 举报
谢谢你！是的，因为onblur方法没有执行，所以没验证。我后来在下面的form标签里面直接加了个onsubmit事件，调用regs(‘click’)，check函数里面增加一个参数用来强制执行onblur，但是没达到预期效果，点击提交后没验证直接跳过了。你能告诉我应该怎么修改吗，再次谢谢你！
hch126163 2016-04-05
- 打赏
- 举报
逻辑上错误
check 函数中绑定事件
多次调用 check函数，导致多次绑定onblur 事件
应该在onload 中绑定事件。
表单提交时，调用check ，此时重新绑定onblur 事件，并没有触发onblur 事件
应该在表单提交时直接验证数据
公西雒 2016-04-05
- 打赏
- 举报
onload时check里面onblur 事件没有执行，导致fnCallback(this.value)没有执行也就是function(val)这步没有执行，而直接log了，所以state是true，但你的验证是可用的。
cocotsau 2016-04-05
- 打赏
- 举报
大神们，快来帮帮我吧
cocotsau 2016-04-05
- 打赏
- 举报
谢谢你，我发现错在哪里了，148行，字符串传参，应该写成单引号。
onsubmit="return regs("click");"
//改写成
onsubmit="return regs('click');"cocotsau 2016-04-05
- 打赏
- 举报
多谢楼上各位大神，我的问题解决了，准备结贴。
是一个很无语的问题，想来是自己对JavaScript和html的语法都不够熟悉，在此总结一下：写行间样式的时候一定得注意了！
公西雒 2016-04-05
- 打赏
- 举报
//仿jQuery选择器
function $(selector, content){
content = content || document;
var sTag = selector.charAt(),
arr = [],
allName = content.getElementsByTagName("*");
if(sTag === "#"){
selector = selector.substring(1);
return content.getElementById(selector);
}else if (sTag === "."){
selector = selector.substring(1);
for(var i=0;i<allName.length;i++){
var reg=new RegExp("\\b"+selector+"\\b","i");
if(reg.test(allName[i].className))arr.push(allName[i]);
}
return arr;
}
else return content.getElementsByTagName(selector);
}
/*对象，提示，位置，成功，错误，提示信息，成功信息，错误信息，回调函数, 返回参数*/
function check(obj, aTip, num, aSucc, aError, sTip, sSucc, sError, fnCallback, a) {
var state = false;
obj.onfocus=function(){
aTip[num].style.display="block"; aTip[num].innerHTML=sTip;
aSucc[num].style.display="none"; aSucc[num].innerHTML="";
aError[num].style.display="none"; aError[num].innerHTML="";
};
obj.onblur=function(){
aTip[num].style.display = "none"; aTip[num].innerHTML = "";
state = fnCallback(this.value);
if (state) {
aSucc[num].style.display="block"; aSucc[num].innerHTML=sSucc;
aError[num].style.display="none"; aError[num].innerHTML="";
}else
{
aSucc[num].style.display="none"; aSucc[num].innerHTML="";
aError[num].style.display="block"; aError[num].innerHTML=sError;
}
};
if (a === "click") {
obj.onblur();
return state;
}
}
window.onload=regs;
function regs(a){
var oUserName=document.getElementsByName("username")[0],
oPwd=document.getElementsByName("pwd")[0],
oConfirmPwd=document.getElementsByName("confirmpwd")[0],
oEmail=document.getElementsByName("email")[0],
aTip=$(".pass-tip"),
aSucc=$(".pass-succ"),
aError=$(".pass-error");
var state = check(
/*对象，提示，位置，成功，错误，提示信息，成功信息，错误信息，回调函数, 返回参数*/
oUserName, aTip, 0, aSucc, aError, "请输入3-20位用户名，英文、字母或下划线", "输入正确", "输入错误",
function(val){
return val.match(/^\w{3,20}$/);
}, a);
if (!state) {
return false;
}
state = check(
oPwd, aTip, 1, aSucc, aError, "请输入6-20位密码，英文和数字", "输入正确", "输入错误",
function (val) {
return val.match(/^[0-9A-Za-z]{6,20}$/);
}, a);
if (!state) {
return false;
}
state = check(
oConfirmPwd, aTip, 2, aSucc, aError, "请再次输入密码", "输入正确", "密码不一致",
function(val){
return val.match(/^[0-9A-Za-z]{6,20}$/) && oConfirmPwd.value === oPwd.value;
}, a);
if (!state) {
return false;
}
state = check(
oEmail, aTip, 3, aSucc, aError, "请输入邮箱地址", "输入正确", "邮箱格式不正确",
function(val){
return val.match(/^[a-z0-9]{1}\w+@\w+\.\w+[a-z0-9]{1}$/i);
}, a);
if (!state) {
return false;
}
return true;
};
texplore 2016-04-05
- 打赏
- 举报
