带有密码确认的 Javascript 表单验证

Posted

技术标签:

【中文标题】带有密码确认的 Javascript 表单验证【英文标题】:Javascript form validation with password confirming 【发布时间】:2013-06-04 03:08:56 【问题描述】:

我正在尝试编写一个注册页面,但我遇到了最艰难的时期。

<form  action="insert.php" method="post">
    <h1>Registration:</h1>
    <input type="text" name="first" placeholder="First name">
    <input type="text" name="last" placeholder="Last name"><br />
    <input type="text" name="username" placeholder="Username"> <br />
    <input type="password" name="password" placeholder="password"> <br />
    <input type="password" name="confirmPass" placeholder="Confirm Password"> <br />
    <input type="submit" value="Register">
</form>

这是我在注册页面上的代码。如何调用我的 javascript 函数并让它仍然发布并执行操作?我把它作为一个单独的简单模块,但我想合并它们

<input id="pass1" type="password" placeholder="Password" style="border-radius:7px; border:2px solid #dadada;" /> <br />
<input id="pass2" type="password" placeholder="Confirm Password" style="border-radius:7px; border:2px solid #dadada;"/> <br />

<script>
    function myFunction() 
        var pass1 = document.getElementById("pass1").value;
        var pass2 = document.getElementById("pass2").value;
        if (pass1 != pass2) 
            //alert("Passwords Do not match");
            document.getElementById("pass1").style.borderColor = "#E34234";
            document.getElementById("pass2").style.borderColor = "#E34234";
        
        else 
            alert("Passwords Match!!!");
        
    
</script>

<button type="button" onclick="myFunction()">Sumbit</button>

我不需要帮助合并它们,我知道我必须切换一些东西,但是如果它们在一起,我该如何调用 JavaScript 函数?

在我弄清楚要做什么之后,这将做得更加整洁,那么调用我的 JavaScript 函数的最佳方法是什么,如果它成功,则继续发布和操作表单的部分。我可以放弃提交按钮,只做一个调用 JavaScript 函数的按钮类型,但如果它工作或不工作会发生什么?我本质上(此时)想确保密码相同,如果不是,不要前进到 insert.php 但如果它们匹配,则将表单数据传递给 insert.php

【问题讨论】:

【参考方案1】:

只需为您的表单添加 onsubmit 事件处理程序:

<form  action="insert.php" onsubmit="return myFunction()" method="post">

button 中删除onclick 并将其设置为input 类型为submit

<input type="submit" value="Submit">

并向您的函数添加布尔返回语句:

function myFunction() 
    var pass1 = document.getElementById("pass1").value;
    var pass2 = document.getElementById("pass2").value;
    var ok = true;
    if (pass1 != pass2) 
        //alert("Passwords Do not match");
        document.getElementById("pass1").style.borderColor = "#E34234";
        document.getElementById("pass2").style.borderColor = "#E34234";
        return false;
    
    else 
        alert("Passwords Match!!!");
    
    return ok;

【讨论】:

【参考方案2】:

将此添加到您的表单中:

<form  id="regform" action="insert.php" method="post">

将此添加到您的函数中:

<script>
    function myFunction() 
        var pass1 = document.getElementById("pass1").value;
        var pass2 = document.getElementById("pass2").value;
        if (pass1 != pass2) 
            //alert("Passwords Do not match");
            document.getElementById("pass1").style.borderColor = "#E34234";
            document.getElementById("pass2").style.borderColor = "#E34234";
        
        else 
            alert("Passwords Match!!!");
            document.getElementById("regForm").submit();
        
    
</script>

【讨论】:

【参考方案3】:
 if ($("#Password").val() != $("#ConfirmPassword").val()) 
          alert("Passwords do not match.");
      

一种消除不必要代码的 JQuery 方法。

【讨论】:

以上是关于带有密码确认的 Javascript 表单验证的主要内容,如果未能解决你的问题,请参考以下文章

带密码确认的引导 4 验证并禁用提交,直到表单验证(注册表单)

表单验证问题

Java 表单验证

Laravel 验证登录表单验证在密码确认中失败?

使用 parsley js 进行表单验证。字母数字和密码确认

el-table 添加表单验证