求助!表单验证_html/css_WEB-ITnose
程序员文章站
2024-01-08 08:52:40
...
本帖最后由 zmtwyd 于 2012-10-15 13:52:54 编辑 表单验证的时候 密码和重复密码的时候 如果这样 先输入密码 再输入重复密码(当然2此密码一致) 然后离开焦点 就可以显示2个都是正确的。这事正常的。
但是,
如果先输入重复密码,再输入密码,然后离开焦点的时候 即使2次不一致,也显示的2个都是正确。这是因为输入密码后离开焦点的时候只是验证了自己而没有匹配和下面重复密码的值 ,这个问题怎么解决?
我的思路是 既然重复密码离开焦点的时候验证匹配上面密码的值,那么也让先输入重复密码,再输入密码,然后离开焦点的时候,眼验证下面的重复密码的值。 但如何做到呢???????下面是代码
function checktag(p){
var x=p.nextSibling;
while(x.nodeName!="SPAN")
{
x=x.nextSibling
}
return x;
} //获取INPUT后面的SPAN一个方法
//此函数用于传值,有三个参数,第三个是一个函数的指针,它不被执行函数体,所以为FUN
function yanzhenghanshu(i,ppp,fun,tishi,k) {
i.onfocus= function gaoliang() //获取焦点时,触发的方法
{
if(i.value=="") {checktag(i).innerHTML=ppp; checktag(i).className="d"}
else if(fun()){checktag(i).innerHTML=ppp; checktag(i).className="d"}
else {checktag(i).innerHTML="请重新输入";checktag(i).className="a"}
}
i.onblur= function likai() //失去焦点时触发的方法
{
if(fun()){checktag(i).innerHTML="输入正确";checktag(i).className="c"}
else if (i.value==""){checktag(i).innerHTML=ppp;checktag(i).className="a"}
else {checktag(i).innerHTML=tishi;checktag(i).className="b"}
}
if(k=="hi") {
if(fun()){checktag(i).innerHTML="输入正确";checktag(i).className="c"}
else if (i.value==""){checktag(i).innerHTML=ppp;checktag(i).className="b"}
else {checktag(i).innerHTML=tishi;checktag(i).className="b"}
}
}
onload=yanzhengaaa;
function yanzhengaaa(k){
var stutas=true;
var qu=document.getElementsByTagName("input")[0];
var bo=document.getElementsByTagName("input")[1];
var o=document.getElementsByTagName("input")[2];
var b=document.getElementsByTagName("input")[3]; //获取INPUT对象
//以下是:通过一个函数 为每个INPUT的获取和失去焦点时候的状态 传三个值,第三个传的是函数,这个函数叫回调函数
yanzhenghanshu(qu,"请输入用户名称",function()
{
var zhengze=/^[a-z]\w/; var ha=/\s/g;
if(zhengze.test(qu.value)==true && qu.value.length>=6 && qu.value.length {return true}
else
{ stutas=false; return false}
}
,"输入错误",k);
yanzhenghanshu(bo,"请输入密码" ,function()
{
var zheng=/\w/; var ha=/\s/g;
if(zheng.test(bo.value)==true&&bo.value.length>=6&&bo.value.length {return true}
else
{stutas=false;return false}
}
,"输入错误",k);
yanzhenghanshu(o,"请再次输入密码",function()
{
var zheng=/\w/; var ha=/\s/g;
if(zheng.test(o.value)==true&&o.value.length>=6&&o.value.length {return true}
else
{ stutas=false;return false}
}
,"输入错误或两次密码不一致",k);
yanzhenghanshu(b,"请输入邮箱地址",function()
{
var zhengze=/^[a-z]\w/; var ha=/\s/g;
if(zhengze.test(b.value)==true&&b.value.length>=6&&qu.value.length {return true}
else
{stutas=false;return false}
}
,"输入错误",k);
return stutas;
}
但是,
如果先输入重复密码,再输入密码,然后离开焦点的时候 即使2次不一致,也显示的2个都是正确。这是因为输入密码后离开焦点的时候只是验证了自己而没有匹配和下面重复密码的值 ,这个问题怎么解决?
我的思路是 既然重复密码离开焦点的时候验证匹配上面密码的值,那么也让先输入重复密码,再输入密码,然后离开焦点的时候,眼验证下面的重复密码的值。 但如何做到呢???????下面是代码
function checktag(p){
var x=p.nextSibling;
while(x.nodeName!="SPAN")
{
x=x.nextSibling
}
return x;
} //获取INPUT后面的SPAN一个方法
//此函数用于传值,有三个参数,第三个是一个函数的指针,它不被执行函数体,所以为FUN
function yanzhenghanshu(i,ppp,fun,tishi,k) {
i.onfocus= function gaoliang() //获取焦点时,触发的方法
{
if(i.value=="") {checktag(i).innerHTML=ppp; checktag(i).className="d"}
else if(fun()){checktag(i).innerHTML=ppp; checktag(i).className="d"}
else {checktag(i).innerHTML="请重新输入";checktag(i).className="a"}
}
i.onblur= function likai() //失去焦点时触发的方法
{
if(fun()){checktag(i).innerHTML="输入正确";checktag(i).className="c"}
else if (i.value==""){checktag(i).innerHTML=ppp;checktag(i).className="a"}
else {checktag(i).innerHTML=tishi;checktag(i).className="b"}
}
if(k=="hi") {
if(fun()){checktag(i).innerHTML="输入正确";checktag(i).className="c"}
else if (i.value==""){checktag(i).innerHTML=ppp;checktag(i).className="b"}
else {checktag(i).innerHTML=tishi;checktag(i).className="b"}
}
}
onload=yanzhengaaa;
function yanzhengaaa(k){
var stutas=true;
var qu=document.getElementsByTagName("input")[0];
var bo=document.getElementsByTagName("input")[1];
var o=document.getElementsByTagName("input")[2];
var b=document.getElementsByTagName("input")[3]; //获取INPUT对象
//以下是:通过一个函数 为每个INPUT的获取和失去焦点时候的状态 传三个值,第三个传的是函数,这个函数叫回调函数
yanzhenghanshu(qu,"请输入用户名称",function()
{
var zhengze=/^[a-z]\w/; var ha=/\s/g;
if(zhengze.test(qu.value)==true && qu.value.length>=6 && qu.value.length {return true}
else
{ stutas=false; return false}
}
,"输入错误",k);
yanzhenghanshu(bo,"请输入密码" ,function()
{
var zheng=/\w/; var ha=/\s/g;
if(zheng.test(bo.value)==true&&bo.value.length>=6&&bo.value.length {return true}
else
{stutas=false;return false}
}
,"输入错误",k);
yanzhenghanshu(o,"请再次输入密码",function()
{
var zheng=/\w/; var ha=/\s/g;
if(zheng.test(o.value)==true&&o.value.length>=6&&o.value.length {return true}
else
{ stutas=false;return false}
}
,"输入错误或两次密码不一致",k);
yanzhenghanshu(b,"请输入邮箱地址",function()
{
var zhengze=/^[a-z]\w/; var ha=/\s/g;
if(zhengze.test(b.value)==true&&b.value.length>=6&&qu.value.length {return true}
else
{stutas=false;return false}
}
,"输入错误",k);
return stutas;
}
回复讨论(解决方案)
你可以参考一下这个,很有用而且可以扩展的一个JS文件
http://download.csdn.net/detail/sgyyz/4358592
你应该在表单的onsubmit()事件中验证
推荐阅读
-
求助!表单验证_html/css_WEB-ITnose
-
简单实现"回车!=提交"(去除表单的回车即提交)_html/css_WEB-ITnose
-
css解决select下拉表单option高度的办法_html/css_WEB-ITnose
-
Bootstrap入门笔记之(二)表单_html/css_WEB-ITnose
-
Bootstrap3表单checkbox不能水平对齐问题_html/css_WEB-ITnose
-
Bootstrap全局CSS样式之表单_html/css_WEB-ITnose
-
新手求 关于html表单元素的动态变化_html/css_WEB-ITnose
-
利用js编写一个简单的html表单验证,验证通过时提交数据(附源码)
-
div中的onclick 提交表单_html/css_WEB-ITnose
-
表单美化_html/css_WEB-ITnose