您的位置：首页 > Web前端 > JavaScript

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

2016-04-24 00:20 537 查看

<!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" onsubmit="return tijiao()">

用户名：<input type="text" id="user_name" onfocus="userGetFocus()" onblur="userLoseFocus()"/><span id="user_span"></span><br/><br/>

密　码：<input type="password" id="password_name" onfocus="passGetFocus()" onblur="passLoseFocus()"/><span id="pass_span"></span><br/>

<input type="submit" value="提交">

</form>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航