使用javascript验证html表单

时间:2014-08-18 15:39:20

标签: javascript html forms validation

我想在将数据发送到服务器之前使用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

2 个答案:

答案 0 :(得分:0)

我创建了这个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;
        }
    }
}

答案 1 :(得分:0)

谢谢大家的答案。 我尝试了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"不正确?

感谢您的帮助!