javascript中简单的表单提交判断条件

布满荆棘的人生 2022-08-21 07:55 114阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">  
<head>  
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />  
<title>网页标题</title>  
<meta name="keywords" content="关键字列表" />  
<meta name="description" content="网页描述" />  
<link rel="stylesheet" type="text/css" href="" />  
<style type="text/css"></style>  
<script type="text/javascript">  
//准备好body中的内容  
//使用用户聚焦的函数  
  
  
  
function userGetFocus()\{  
//获取userspan的Id  
var spanId=document.getElementById("user\_span");  
//给span中添加内容  
spanId.innerHTML="<font color='blue' size='2'>请输入5~15位的用户名</font>"  
\}  
//使用用户失去焦点的函数  
function userLoseFocus()\{  
//这里先获取input文本框 的内容  
  
var user\_Name=document.getElementById("user\_name");  
var len =user\_Name.value.length;  
if(len==0)\{  
var spanId=document.getElementById("user\_span");  
spanId.innerHTML="<font color='red' size='2'>\*请输入5~15位的用户名</font>";  
return false;  
\}else if(len<5 ||len>15)\{  
var spanId=document.getElementById("user\_span");  
spanId.innerHTML="<font color='red' size='2'>\*您输入的用户名不符合规范，请重新输入！</font>";  
return false;  
\}else\{  
//遍历数组  
var arr= \["\#","@","&","%","<",">"\];  
var arrLen=arr.length;  
function result()\{   
for(var i=0;i<arrLen;i++ )\{  
for(var j=0;j<len;j++)\{  
if(user\_Name.value.charAt(j)==arr\[i\])\{  
 return true;   
\}  
\}   
  
\}  
return false;  
\}  
if(result())\{  
   var spanId=document.getElementById("user\_span");  
    spanId.innerHTML="<font color='red' size='2'>您输入的用户名有不合法字符</font>";  
return false;  
  
   \}else\{  
  
var spanId=document.getElementById("user\_span");  
spanId.innerHTML="<font color='blue' size='2'>您输入的用户名合格！</font>";  
return true;  
       \}  
  
    \}  
\}//函数  
  
//定义password的聚焦函数  
function passGetFocus()\{  
var passSpan=document.getElementById("pass\_span");  
passSpan.innerHTML="<font size='2' color ='blue'>请输入6~10位的密码</font>";  
\}  
//定义一个password的失焦的函数  
function passLoseFocus()\{  
var pass\_num=document.getElementById("password\_name");  
var pass\_len=pass\_num.value.length;  
//判断  
if(pass\_len==0)\{  
var passSpan=document.getElementById("pass\_span");  
passSpan.innerHTML="<font size='2' color ='red'>\*请输入6~10位的密码</font>";  
return false;  
\}else if(pass\_len<6 || pass\_len>10)\{  
var passSpan=document.getElementById("pass\_span");  
passSpan.innerHTML="<font size='2' color='red'>您输入的密码不符合规范</font>";  
return false;  
\}else\{  
//遍历数组  
var arr1= \["\#","@","&","%","<",">"\];  
var arrLen=arr1.length;  
function result1()\{   
for(var i=0;i<arrLen;i++ )\{  
for(var j=0;j<pass\_len;j++)\{  
if(pass\_num.value.charAt(j)==arr1\[i\])\{  
 return true;   
\}  
\}   
  
\}  
return false;  
\}  
if(result1())\{  
   var passSpan=document.getElementById("pass\_span");  
    passSpan.innerHTML="<font color='red' size='2'>您输入的用户名有不合法字符</font>";  
return false;  
  
   \}else\{  
  
var passSpan=document.getElementById("pass\_span");  
passSpan.innerHTML="<font color='blue' size='2'>您输入的用户名合格！</font>";  
return true;  
       \}  
  
\}  
  
\}  
function tijiao()\{  
var user\_result=userLoseFocus();  
var pass\_result=passLoseFocus();  
if(user\_result && pass\_result )\{  
return true;  
\}else\{  
return false;  
\}   
\}  
  
  
</script>  
</head>  
<body>  
<form action ="index.php" method="post" οnsubmit="return tijiao()">  
用户名：<input type="text" id="user\_name" οnfοcus="userGetFocus()" οnblur="userLoseFocus()"/><span id="user\_span"></span><br/><br/>  
密　码：<input type="password" id="password\_name" οnfοcus="passGetFocus()" οnblur="passLoseFocus()"/><span id="pass\_span"></span><br/>  
<input type="submit" value="提交">  
  
  
</form>  
</body>  
</html>