当前位置: 代码迷 >> Java Web开发 >> 想做一个不符合条件提交按钮时灰色的按不了! 多谢了
  详细解决方案

想做一个不符合条件提交按钮时灰色的按不了! 多谢了

热度:281   发布时间:2016-04-16 21:46:08.0
想做一个不符合条件提交按钮时灰色的按不了! 谢谢了
想做一个格式不符合条件按钮就成灰色不能按 如果格式符合条件就能提交的文件 这个怎么实现啊 详细点 最好有代码 能告诉插入哪里么 谢谢了!
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <script>
    function verifyTel1(){
        var regexp1=/^[a-z0-9]{3,9}$/;        
        var t1 = document.getElementById("t1").value;
        if(!regexp1.test(t1)){
            document.getElementById("msg").style.display="inline-block";
            document.getElementById("msg").innerHTML="用户名是3-9位不得使用_+!@#$等特殊符号";    
            document.getElementById("t1").focus();  //让输入框获得焦点
            document.getElementById("t1").select(); //选中输入框的内容
            return false;
        }else{
            document.getElementById("msg").style.display="none";
            return true;
        }
    }

    function verifyTel2(){
        var regexp2=/^[a-z0-9]{6,13}$/;
        var t2 = document.getElementById("t2").value;
        if(!regexp2.test(t2)){
            document.getElementById("msg2").style.display="inline-block";
            document.getElementById("msg2").innerHTML="请输入正确的密码!";
            document.getElementById("t2").focus();  //让输入框获得焦点
            document.getElementById("t2").select(); //选中输入框的内容
            return false;
        }else{
            document.getElementById("msg2").style.display="none";
            return true;
        }
    }
    
    //提交表单
    function submitForm(){
        if(verifyTel1() && verifyTel2()){
            document.getElementById("allow").submit();
        }
    }
    
 </script>
 </head>
 <body>
<form method="post" action="" id="allow">
<div id="form">
    <div class="int">
        <label for="username">账 号:</label>
        <input type="text" id="t1" class="input" />
    </div><div id="msg"></div>
    <div class="int">
        <label for="txtpwd">密 码:</label>
        <input type="password" id="t2" class="input" />
    </div><div id="msg2"></div>
<br>
<input type="button" value="提交" onclick="submitForm()"
</form>
 </body>
</html>

------解决思路----------------------
这种在你的文本框失去焦点的时候去执行你的verifyTel1,如果验证失败设置按钮 disabled="disabled" 
------解决思路----------------------
在<input type="button" value="提交" onclick="submitForm()"中加入判断条件,如果不符合条件就添加button属性disabled
------解决思路----------------------
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <script>
    function verifyTel1(){
        var regexp1=/^[a-z0-9]{3,9}$/;        
        var t1 = document.getElementById("t1").value;
        if(!regexp1.test(t1)){
            document.getElementById("msg").style.display="inline-block";
            document.getElementById("msg").innerHTML="用户名是3-9位不得使用_+!@#$等特殊符号";    
            document.getElementById("t1").focus();  //让输入框获得焦点
            document.getElementById("t1").select(); //选中输入框的内容
            return false;
        }else{
            document.getElementById("msg").style.display="none";
            return true;
        }
    }

    function verifyTel2(){
        var regexp2=/^[a-z0-9]{6,13}$/;
        var t2 = document.getElementById("t2").value;
        if(!regexp2.test(t2)){
            document.getElementById("msg2").style.display="inline-block";
            document.getElementById("msg2").innerHTML="请输入正确的密码!";
            document.getElementById("t2").focus();  //让输入框获得焦点
            document.getElementById("t2").select(); //选中输入框的内容
            return false;
        }else{
            document.getElementById("msg2").style.display="none";
            return true;
        }
    }
    
    //提交表单
    function submitForm(){
        if(verifyTel1() && verifyTel2()){
            document.getElementById("allow").submit();
        }else{

  document.getElementById("btn").disabled="disabled"
}
    }
    
 </script>
 </head>
 <body>
<form method="post" action="" id="allow">
<div id="form">
    <div class="int">
        <label for="username">账 号:</label>
        <input type="text" id="t1" onchange="document.getElementById('btn').disabled=''" class="input" />
    </div><div id="msg"></div>
    <div class="int">
        <label for="txtpwd">密 码:</label>
        <input type="password" id="t2" onchange="document.getElementById('btn').disabled=''" class="input" />
    </div><div id="msg2"></div>
<br>
<input type="button" id="btn" value="提交" onclick="submitForm()"
</form>
 </body>
</html>

------解决思路----------------------
你要在 <form  onSubmit="vali()">  vali里面写入你的验证  不合法的 将<input type="submit" disabled="disabled">
------解决思路----------------------
楼主 你发的另外一个帖子已经 有人写出来了
http://bbs.csdn.net/topics/390913499


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <script>
     function verifyTel1() {
         var regexp1 = /^[a-z0-9]{3,9}$/;
         var t1 = document.getElementById("t1").value;
         if (!regexp1.test(t1)) {
             document.getElementById("msg").style.display = "inline-block";
             document.getElementById("msg").innerHTML = "用户名是3-9位不得使用_+!@#$等特殊符号";
             document.getElementById("t1").focus();  //让输入框获得焦点
             document.getElementById("t1").select(); //选中输入框的内容
             setDisabled(true)
             return false;
         } else {
             document.getElementById("msg").style.display = "none";
             return true;
         }
     }

     function verifyTel2() {
         var regexp2 = /^[a-z0-9]{6,13}$/;
         var t2 = document.getElementById("t2").value;
         if (!regexp2.test(t2)) {
             document.getElementById("msg2").style.display = "inline-block";
             document.getElementById("msg2").innerHTML = "请输入正确的密码!";
             document.getElementById("t2").focus();  //让输入框获得焦点
             document.getElementById("t2").select(); //选中输入框的内容
             setDisabled(true)
             return false;
         } else {
             document.getElementById("msg2").style.display = "none";
             return true;
         }
     }
     function setDisabled(disabled) {
         document.getElementById('btn').disabled = disabled
     }
     //提交表单
     function submitForm(btn) {
         if (verifyTel1() && verifyTel2()) {
             document.getElementById("allow").submit();
         }
     }
     
 </script>
 </head>
 <body>
<form method="post" action="" id="allow">
<div id="form">
    <div class="int">
        <label for="username">账 号:</label>
        <input type="text" id="t1" class="input" onkeydown="setDisabled(false)" />
    </div><div id="msg"></div>
    <div class="int">
        <label for="txtpwd">密 码:</label>
        <input type="password" id="t2" class="input"  onkeydown="setDisabled(false)" />
    </div><div id="msg2"></div>
<br>
<input type="button" value="提交" onclick="submitForm()" id="btn"/>
</form>
 </body>
</html>
  相关解决方案