1.HTML文件及控制样式
<html>
<head>
<title>表单验证</title>
<script src="formCheck.js"></script>
<style>
/*span font*/
span{
font-size:12px;
}
/*默认*/
.status1{
color:#aaa;
}
/*聚焦*/
.status2{
color:#000;
}
/*错误*/
.status3{
color:red;
}
/*正确*/
.status4{
color:blue;
}
</style>
</head>
<body>
<form action="login.html" method="post" οnsubmit="return sub('sub')" name="frm1">
<ul>
<li><label for="username">用 户 名:<input type="text" name="username">
<span class="status1">请输入用户名</span></label></li>
<li><label for="password">密 码:<input type="password" name="password">
<span class="status1">请输入密码</span></label></li>
<li><label for="repress">密码确认:<input type="password" name="repass">
<span class="status1">请输入确认密码</span></label></li>
<li><label for="email">邮 件:<input type="text" name="email">
<span class="status1">请输入邮箱</span></label></li>
<li><label for="other">其 他:<input type="text" name="other">
<span class="status1">请输入其他</span></label></li>
<li><label for="submit">提 交:<input type="submit" name="submit"></label></li>
</ul>
</form>
</body>
</html>
js控制文件
/*获取表单中相应input输入后的span
*
*param:
obj:需要获取span的对象
*
*返回: 返回获取的span节点对象
*
* */
function getSpan(obj){
while(true){
if(!obj.nextSibling.nodeName.match(/span/i)){
obj=obj.nextSibling;
}else{
return obj.nextSibling;
}
}
}
/*检查表单中输入对象是否合法
*
*param:
obj:被检查的对象
tip:检查后span输入的文字
fun:检查规则函数<回调函数>
*
* */
function checkForm(obj,tip,fun,sub){
//获取obj后面的span
var sobj=getSpan(obj);
//obj获得焦点时(将tip提示显示出来,改变其css属性)
obj.οnfοcus=function(){
sobj.innerHTML=tip;
sobj.className="status2";
}
//obj失去焦点时(检查是否合格,做出相应提示)
obj.οnblur=function(){
//检查是否合格
if(fun(this.value)){
sobj.innerHTML="输入正确";
sobj.className="status4";
}else{
sobj.className="status3";//错误时改变提示信息颜色
}
}
//点击提交按钮触发的检查
if(sub=="sub"){
obj.onblur();
}
}
/*页面加载时自动载入运行*/
οnlοad=sub;
function sub(sub){
var flag=true;
//获取表单中的对象
var username=document.getElementsByName("username")[0];
var password=document.getElementsByName("password")[0];
var repass=document.getElementsByName("repass")[0];
var email=document.getElementsByName("email")[0];
var other=document.getElementsByName("other")[0];
//username检查
checkForm(username,"用户名的长度为3-20位字符",function(val){
if(val.match(/^\S+$/) && val.length>=3 && val.length<=20){
return true;
}else{
flag=false;
return false;
}
},sub);
//password检查
checkForm(password,"密码长度必须在6-20位之间",function(val){
if(val.match(/^\S+$/) && val.length>=6 && val.length<=20){
return true;
}else{
flag=false;
return false;
}
},sub);
//repass检查
function repassC(){
checkForm(repass,"确认密码与密码一致,规则相同",function(val){
if(val==password.value && val!=""){
return true;
}else{
flag=false;
return false;
}
},sub);
}
repassC();
//email检查
checkForm(email," 要按邮箱规则输入",function(val){
if(val.match(/\w+@\w+.\w+/)){
return true;
}else{
flag=false;
return false;
}
},sub);
//其他
checkForm(other,"请输入其他",function(val){
return true;
flag=false;
},sub);
return flag;
}
1231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
