利用disabled=true，使提交按钮变成灰色，不能提交

最新推荐文章于 2024-05-08 12:00:08 发布

whjwhja6

最新推荐文章于 2024-05-08 12:00:08 发布

阅读量2.9w

点赞数 1

本文链接：https://blog.csdn.net/whjwhja6/article/details/8154651

版权

验证用户是否正确，错误的话，会在用户名后显示用户名错误，并利用disabled=true，使提交按钮变成灰色，不能提交，正确的话，disabled=false（提交按钮不变色，可用）
步骤：先建立一个登陆表单，在用户名失焦时调用checkUser()函数，验证用户名是否等于csdn（csdn是定义的，并不是从数据库中获取的），用户名后还有个图层，会显示是否用户名正确

1、index.html
<title>CSDN学院2011级PHP 聊天室</title>
<script language="javascript" type="text/javascript" src="yanzheng.js"></script>

</head>
<body>
<form action="chatindex.php" method="post">
<table width="300" border="0" align="center">
<tr>
    <td colspan="2" align="center">欢迎使用PHP聊天室</td>
</tr>
<tr>
    <td>用户名：</td>
    <td><label for="textfield"></label>
    <input type="text" name="username" id="username" οnblur="checkUser()" /><br>
    <span id="userinfo"></span></td>
</tr>
<tr>
    <td>密码：</td>
    <td><input type="password" name="password" id="password" /></td>
</tr>
<tr>
    <td> </td>
    <td><input type="submit" name="button" id="btn_submit" value="提交" />
    <input type="reset" name="button2" id="reset" value="重置" /></td>
</tr>
</table>
</form>

</body>
2、yanzheng.js
var xhr;
//该方法解决IE低版本的创建ajax对象差异的问题
function initAjax(){

//判断是否是IE浏览器
if(window.ActiveXObject){
   //如果是IE浏览器就这样创建对象
   xhr=new ActiveXObject("Microsoft.XMLHTTP");
}else{
   alert("-----");
   //如果是火狐或者其他浏览器就这样创建
   xhr=new XMLHttpRequest();
}

return xhr;
}
function checkUser(){

//获取用户输入的内容
var username=document.getElementById("username").value;

//作为参数传递到服务器端
//1、初始化ajax引擎 XMLHttpRequest() ajax引擎
    xhr =initAjax();
    //2、定义ajax异步请求的路径 encodeURI()帮我们玩成将中文进行编码
    var url="logincheck.php?uname="+encodeURI(username)+"&r="+Math.random();//把用户名传给参数uname

    //3、打开链接 open("请求方法",请求的服务器路径,true 异步/false 同步)
    xhr.open("get",url,true);
    //4、发送请求
    xhr.send(null);
    //5、监听ajax引擎状态，如果已经完成    function (){} 匿名函数，特点：不需要调用，会立即执行
    xhr.onreadystatechange=function (){
   //判断ajax是否和服务器交互完成（取得数据）
   if(xhr.readyState==4){

    //服务器端进行查询，根据查询结果如果查询到返回1，如果未查询到返回0
    if(xhr.responseText*1){//*1是为了构成0或1，responseText返回的是或1，在乘1，还是0或1

     //如果用户名存在，我们让提交按钮可用按钮的disabled=true 灰色，=false 表示可用，不变色
      document.getElementById("btn_submit").disabled=false;//btn_submit提交按钮的id
       //如果用户名正确，则我们设置span内容为空
    document.getElementById("userinfo").innerHTML="";//userinfo是用户名后的span的id，用户名正确时，图层清空，不显示任何内容
    }else{

     //如果用户名不存在，我们让提交按钮不可用（变成灰色的）
     document.getElementById("btn_submit").disabled=true;
     //在用户名输入框后，提示一句话"用户名不存在"
     document.getElementById("userinfo").innerHTML="<font color='red' size='2'>用户名不存在！</font>";

     }



   }
  };

}
3、logincheck.php
<?php

$user=$_GET['uname'];//ajax中用get传递的
//比较用户名是否等于 csdn，就把用户名定义成csdn
if($user=="csdn"){

echo "1";
}else{
echo "0";

}

whjwhja6

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
利用disabled=true，使提交按钮变成灰色，不能提交

验证用户是否正确，错误的话，会在用户名后显示用户名错误，并利用disabled=true，使提交按钮变成灰色，不能提交，正确的话，disabled=false（提交按钮不变色，可用）步骤：先建立一个登陆表单，在用户名失焦时调用checkUser()函数，验证用户名是否等于csdn（csdn是定义的，并不是从数据库中获取的），用户名后还有个图层，会显示是否用户名正确1、index.htm
复制链接

扫一扫