javascript - 保持提交按钮处于禁用状态，直到表单完成并确认密码

Question

我知道已经有很多关于此的帖子，但是无论我尝试什么，都对我的表单无效。

我只是希望在填写所有字段之前禁用提交按钮，并且我希望在提交之前$mypassword检查是否相等$myconfirmpassword。

如果你能找到有用的东西。太感谢了！！

显然，出于隐私目的，有些内容是隐藏的，因为您看不到我的 CSS 和 PHP 信息。

<div id="container" style="height:700px;">
<a href="login.php" class="anchor"><div id="back">
 <h2>Back</h2>             
 </div></a>
    <div id="registration_container" >
   <table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#FF9">
    <tr>
<form name="form3" method="post" action="check_finish_registration.php">
        <td>
        <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FF9">
            <tr>
                <td colspan="3"><strong>Complete Registration </strong></td>
            </tr>
            <tr>
                <td width="2000">First Name</td>
                <td width="6">:</td>
                <td width="294"><?php echo $fname ?></td>
            </tr>
            <tr>
                <td width="2000">Middle Name*</td>
                <td width="6">:</td>
                <td width="294"><input type="text" name="mymname" id="mymname"></td>
            </tr>
            <tr>
                <td width="2000">Last Name</td>
                <td width="6">:</td>
                <td width="294"><?php echo $lname ?></td>
            </tr>
             <tr>
                <td width="2000">Create a Username*</td>
                <td width="6">:</td>
                <td width="294"><input type="text" name="myusername" id="myusername"></td>
            </tr>
             <tr>
                <td width="2000">Create a Password*</td>
                <td width="6">:</td>
                <td width="294"><input type="text" name="mypassword" id="mypassword"></td>
            </tr>
             <tr>
                <td width="2000">Confirm Your Password*</td>
                <td width="6">:</td>
                <td width="294"><input type="text" name="myconfirmpassword" id="myconfirmpassword"></td>
            </tr>
             <tr>
                <td width="2000">Enter your Sigma Number*</td>
                <td width="6">:</td>
                <td width="294"><input type="text" name="mysnumber" id="mysnumber"></td>
            </tr>
             <tr>
                <td width="2000">E-Mail Address*</td>
                <td width="6">:</td>
                <td width="294"><input type="text" name="myemail" id="myemail"></td>
            </tr>
            <tr>


                <td width="2000">* required field</td>
                <td>&nbsp;</td>
                <td><input   type="submit" id='register' value="Register"disabled='disabled'></td>
            </tr>
        </table>
        </td>
</form>

     </tr>
    </table>
    </div>    
</div>

Answer 1

与其禁用提交按钮，不如尝试验证表单，以便在用户输入正确的值之前，不会将表单提交到数据库？以及关于密码和确认密码字段验证

   <script type="text/javascript">
    function passwordConfirm() {
        var confirmPass = document.getElementById("confirmpassid").value
        if(pass != confirmPass) {
            alert("Mismatching passwords");
        }
      }

Answer 2

尽量不要使用它，但如果你愿意，你可以试一试（jQuery会很好）

var  els=[];
window.onload=function(){
    var inputs=document.getElementsByTagName('input');
    for(i=0; i<inputs.length;i++)
    {
        if(inputs[i].type=='text' || inputs[i].type=='password')
        {
            if(inputs[i].name!='fname' && inputs[i].name!='lname')
            {
                inputs[i].onkeyup=check;
                els.push(inputs[i]);
            }
        }
    }
}

function check()
{
    var isValid=true;
    for(i=0; i<els.length;i++)
    {
        if(!els[i].value.length) 
        {
            isValid=false;
            break;
        }
        else isValid=true;
    }
    var reg=document.getElementById('register');
    if(isValid && matctValidInputs()) reg.disabled=false;
    else reg.disabled=true;
}

function matctValidInputs()
{
    var re=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{3}$/;
    var ps=document.getElementById('mypassword');
    var cps=document.getElementById('myconfirmpassword');
    var snum=document.getElementById('mysnumber');
    var mail=document.getElementById('myemail');
    if(ps.value.length>5 && ps.value==cps.value && re.test(mail.value) && isNumber(snum.value))
        return true;
    else return false;
}

function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n) && n.length>5;
}

在测试演示之前：

1. 密码必须为 6 个字符并与确认密码匹配。
2. Sigma Number必须是一个数字且最少 6 位数字。
3. 电子邮件必须匹配有效的电子邮件（非常基本的正则表达式）
4. 没有给出警报/通知。

演示。

Answer 3

只需复制并粘贴我的代码。您可能需要改进一些事情。如果是这样，请告诉我

<script type="text/javascript">
function fnc()
{
var name=document.getElementById("mymname").value;
var username=document.getElementById("myusername").value;
var password=document.getElementById("mypassword").value;
var confirmpassword=document.getElementById("myconfirmpassword").value;
var number=document.getElementById("mysnumber").value;
var email=document.getElementById("myemail").value;
if(name!='' && username!='' && password!='' && confirmpassword!='' && number!='' &&  email!='')
 {
   document.getElementById("register").disabled=false;
 }
 else
 document.getElementById("register").disabled=true;
}
function check()
{
var password=document.getElementById("mypassword").value;
var confirmpassword=document.getElementById("myconfirmpassword").value;
if(password!=confirmpassword)
    {
        alert("password missmatches");
        return false;
    }

}
</script>
<div id="container" style="height:700px;">
<a href="login.php" class="anchor"><div id="back">
<h2>Back</h2>             
</div></a>
<div id="registration_container" >
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#FF9">
<tr>
<form name="form3" method="post" action="check_finish_registration.php" onSubmit="return check()">
    <td>
    <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FF9">
        <tr>
            <td colspan="3"><strong>Complete Registration </strong></td>
        </tr>
        <tr>
            <td width="2000">First Name</td>
            <td width="6">:</td>
            <td width="294"><?php echo $fname ?></td>
        </tr>
        <tr>
            <td width="2000">Middle Name*</td>
            <td width="6">:</td>
            <td width="294"><input type="text" name="mymname" id="mymname" onKeyUp="fnc()"></td>
        </tr>
        <tr>
            <td width="2000">Last Name</td>
            <td width="6">:</td>
            <td width="294"><?php echo $lname ?></td>
        </tr>
         <tr>
            <td width="2000">Create a Username*</td>
            <td width="6">:</td>
            <td width="294"><input type="text" name="myusername" id="myusername" onKeyUp="fnc()"></td>
        </tr>
         <tr>
            <td width="2000">Create a Password*</td>
            <td width="6">:</td>
            <td width="294"><input type="text" name="mypassword" id="mypassword" onKeyUp="fnc()"></td>
        </tr>
         <tr>
            <td width="2000">Confirm Your Password*</td>
            <td width="6">:</td>
            <td width="294"><input type="text" name="myconfirmpassword" id="myconfirmpassword" onKeyUp="fnc()">

            </td>
        </tr>
         <tr>
            <td width="2000">Enter your Sigma Number*</td>
            <td width="6">:</td>
            <td width="294"><input type="text" name="mysnumber" id="mysnumber" onKeyUp="fnc()"></td>
        </tr>
         <tr>
            <td width="2000">E-Mail Address*</td>
            <td width="6">:</td>
            <td width="294"><input type="text" name="myemail" id="myemail" onKeyUp="fnc()"></td>
        </tr>
        <tr>


            <td width="2000">* required field</td>
            <td>&nbsp;</td>
            <td><input   type="submit" id="register" value="Register" disabled='disabled' "></td>
        </tr>
    </table>
    </td>
  </form>

 </tr>
 </table>
 </div>

 </div>