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

最新推荐文章于 2019-05-18 20:31:24 发布

Alan_Weng

最新推荐文章于 2019-05-18 20:31:24 发布

阅读量730

点赞数 1

分类专栏： javascript基础

本文链接：https://blog.csdn.net/fa_ker/article/details/51229309

版权

javascript基础专栏收录该内容

7 篇文章 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>

Alan_Weng

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript中简单的表单提交判断条件

网页标题//准备好body中的内容//使用用户聚焦的函数function userGetFocus(){//获取userspan的Idvar spanId=document.getElementById("user_span");//给span中添加内容spanId.innerHTML="请输入5~15位的用户名"}//使用用户失
复制链接

扫一扫