使用 javascript 验证 html 表单答案

【问题标题】：Validate html form with javascript使用 javascript 验证 html 表单
【发布时间】：2014-08-19 00:22:32
【问题描述】：

我想在将数据发送到服务器之前使用 javascript 验证用户输入，但是当我尝试时浏览器不显示警报消息。

我找不到问题。请帮我。谢谢！

我的 HTML：

    <title>Login Page</title>

    <script type="text/javascript" src="../js/functions.js"></script>

</head>

<body>

    <div id="content">

         <form name="signin_form"  action="../processes/login_process.php" onsubmit="return checkLoginData()"  method="POST">

          <h1>Accesso Utente</h1>

          <p>
             <label for='tf_nick'>Nick</label>
             <input type='text' id='tf_nick' name='tf_nick' value="">

             <label for='tf_password'>Password</label>
             <input type='password' id='tf_password' name='tf_password' value=''>

             <input type='submit' value='OK'>
             <input type='reset' value='Pulisci'>
           </p>

        </form>

     </div>

</body>

我的 JavaScript：

    function checkLoginData(){

        var formObj = document.signin_form;     
        var nick    = "" + formObj.tf_nick.value;
        var pass    = "" + formObj.tf_password.value;

        if ( nick == "" ) {
            alert("Inserisci il nick per accedere!");
            return false;

        } else if ( pass == "" ) {
            alert("Inserisci la password per accedere!");
            return false;

        } else {

            var regExNick = /(?=.*[0-9])(?=.*[a-zA-Z%])^[a-zA-Z0-9%]{3,6}$/;        
            var regExPass = /(?=.*[a-z])(?=.*[A-Z])^[a-zA-Z]{4,8}$/;

            if ( !regExNick.test(nick) ){
                alert("Nick non valido!");
                return false;

            } else if ( !regExPass.test(pass) ) {
                alert("Password non valida!");
                return false;

            } else {
                return true;
            }
        }
    }

这是文件系统：

main_folder/pages/login.php
main_folder/js/functions.js

【问题讨论】：

完成任何基本调试，例如检查您的代码是否运行，如果运行，哪个部分失败？另外，虽然客户端 JS 验证对于即时反馈来说都很好，而且花花公子，但不要永远只使用 js 验证。绕过太容易了。
将返回的 checkLoginData 包装在一个函数中。
@matt：呃，将函数调用包装在函数中？为什么？
使用不错的浏览器，使用附加的不错的调试器（firebug 或 chrome 中的集成调试器），在代码中的任何位置添加断点（使用 debugger; 语句）并检查问题所在。
我刚刚对此进行了测试，它在 Chrome 上运行良好。

标签： javascript html forms validation

【解决方案1】：

我创建了这个 jsfiddle，它只是从您的代码中复制/粘贴的，它工作正常：http://jsfiddle.net/872d6ssn/1/（代码包含在下面，因为 stackoverflow 要求这样做，但它只是一个副本）

您确定以正确的方式包含 js 文件吗？我好像你根本不包括该文件。

HTML

      <h1>Accesso Utente</h1>

      <p>
         <label for='tf_nick'>Nick</label>
         <input type='text' id='tf_nick' name='tf_nick' value="">

         <label for='tf_password'>Password</label>
         <input type='password' id='tf_password' name='tf_password' value=''>

         <input type='submit' value='OK'>
         <input type='reset' value='Pulisci'>
       </p>

    </form>

JavaScript

  function checkLoginData(){
    var formObj = document.signin_form;     
    var nick    = "" + formObj.tf_nick.value;
    var pass    = "" + formObj.tf_password.value;

    if ( nick == "" ) {
        alert("Inserisci il nick per accedere!");
        return false;

    } else if ( pass == "" ) {
        alert("Inserisci la password per accedere!");
        return false;

    } else {

        var regExNick = /(?=.*[0-9])(?=.*[a-zA-Z%])^[a-zA-Z0-9%]{3,6}$/;        
        var regExPass = /(?=.*[a-z])(?=.*[A-Z])^[a-zA-Z]{4,8}$/;

        if ( !regExNick.test(nick) ){
            alert("Nick non valido!");
            return false;

        } else if ( !regExPass.test(pass) ) {
            alert("Password non valida!");
            return false;

        } else {
            return true;
        }
    }
}

【讨论】：

【解决方案2】：

谢谢大家的回答。我尝试了 jsfiddle 并且它有效，所以我认为问题出在：

<script type="text/javascript" src="../js/functions.js"></script>

可能来源不正确，因为 IE 调试器说：

'checkLoginData' is undefined

我必须设置我的 javascript 文件的正确路径。文件系统是这样的：

main_folder/pages/login.php
main_folder/js/functions.js

为什么这个src="../js/functions.js" 不正确？

感谢您的帮助！

【讨论】：