Javascript 带有验证的HTML表单

Javascript 带有验证的HTML表单,javascript,php,html,csv,Javascript,Php,Html,Csv,我有一个带有验证的HTML表单,它工作得很好,但如果我将保存的信息添加到php文件中,它就不会进行验证。它应该检查输入的值是否正确,如果正确,则将信息保存到.csv文件 <!DOCTYPE html> <html> <head> <title>Greaton</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

我有一个带有验证的HTML表单,它工作得很好,但如果我将保存的信息添加到php文件中,它就不会进行验证。它应该检查输入的值是否正确,如果正确,则将信息保存到.csv文件

<!DOCTYPE html>
<html>
<head>
    <title>Greaton</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" media="all" />
    <script src="validation.js"></script>  
</head>
<body>

    <form name="form" method="post" action="csv.php">
        <div class="container">
            <div  class="form">
                <center><img src="logo.jpg" alt="logo" width="200"     height="40"></center>
                </br>

                <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus enim a 
                adipiscing hendrerit. Nam vei orci vitae metus posuere rhncus sed ac augue. 
                Aenean tempus, lectus a rhoncus vulputate, nisi tellus commodo quam, sit amet 
                egestas magna elit ac mauris. Name pretium erat leo,
                id dignissim tortor tincidunt sed. Morbi id est ut tellus euismd convallis.</h1>

                <h2>Pellentesque habitant morbi tristique senectus et netus malesuada fames ac turpis egestas. 
                Fusce egestas egestan ante, nec lobortis elit luctus id. Ut vulputate sem sit amet ipsum pretium, 
                feugiat gravida elit blandit. Donec varius omale mi, posuere rutrum erat placerat a.</h2>

                <h2>Maecenas ullamcorper euismod justo vei dictum. <a href="">Aenean sodales fringilla</a></h2>
                </br>
                <label for="nimi">Nimi:</label>
                <input id="nimi" class="contact" name="nimi" placeholder="Nimi Nimeste"  tabindex="1" type="text" > 
                </br>

                <label for="uisik">Isikukood:</label>
                <input id="isikukood" class="contact" name="isik" placeholder="isikukood"  type="text" > <br>
                <label for="sugu"> Sugu:</label>
                <label for="mees">Mees</label>
                 <input id="mees" class="contact" type="radio" name="Sugu" value="Mees" />
                <label for="naine">Naine</label>
                <input id="naine" class="contact" type="radio" name="Sugu" value="Naine" />
                </br>

                <label for="sunniaasta"> Sünniaasta:</label>
                <input class="sunniaasta" maxlength="4" name="sunniaasta" placeholder="Sünniaasta" >
                </br>

                <label for="email">Email:</label>
                <input id="email" class="contact" ="email" placeholder="greaton@greaton.ee"  type="email"> </br>

                <label for="telefon">Telefon:</label>
                <input id="telefon" class="contact" name="telefon" placeholder="55555555"  type="text"> 
                </br>

                <label for="asukoht"> Asukoht:</label>
                <select class="select" name="asukoht">
                    <option selected>Vali asukoht</option>
                    <option>Harju Maakond</option>
                    <option >Hiiu Maakond</option>
                    <option>Ida-Viru Maakond</option>
                    <option>Jõgeva Maakond</option>
                    <option>Järva Maakond</option>
                </select>
                </br>

                <label for="lisainfo">Lisainfo:</label>
                <div  class="text">

                    <textarea name="lisainfo" rows="8" class="contact" input id="lisainfo" cols="74"></textarea>
                    </br>

                    <input id="tingimused" class="contact" type="checkbox" name="tingimused" required="" type="text">Nõustun reeglite ja tingimustega <br>

                    <input id="uudiskiri" class="contact" type="checkbox" name="uudiskiri" type="text">
                    Soovin tellida uudiskirja<br>
                    <br>

                    <input class="buttom" name="submit" id="submit" tabindex="5" value="Esitan Avalduse" type="submit">

                </div>
           </form> 
        </div>      
    </div>

</body>
</html>
以及与表单值交互的csv.php文件
    if(isset($_POST["submit"])) { 
        $name = $_POST["nimi"]; 
        $isik = $_POST["isik"]; 
        $sunniaasta = $_POST["sunniaasta"]; 
        $sugu = $_POST["sugu"]; 
        $email = $_POST["email"]; 
        $telefon = $_POST["telefon"]; 
        $asukoht = $_POST["asukoht"]; 
        $lisainfo = $_POST["lisainfo"]; 

        $cvsData ='"Nimi","Isikukood","sunniaasta","sugu","email","telefon","asukoht","lisainfo"'.PHP_EOL; 
        $cvsData .= "\"$name\",\"$isik\",\"$sunniaasta\",\"$sugu\",\"$email\",\"$telefon\",\"$asukoht\",\"$lisainfo\"".PHP_EOL; 
        $fp = fopen("test.csv", "a"); 

        if($fp) { 
            fwrite($fp,$cvsData); // Write information to the file 
            fclose($fp); // Close the file 
        } 
    } 
?>

谢谢你的关注

问题:

     function ValidateEmail(uemail)

            {
                 //change the last else part to this:
                  else
                   {
                     msg=callPHP();
                     if(msg=="true")
                        alert('Form Succesfully Submitted');
                     else
                         alert('fail Submitted');
                     window.location.reload()
                     return true;
                    }
              }
          function callPHP(){
                     //change the else part  use ajax to call the php here.


                   var uname = document.registration.nimi;
                   var uadd = document.registration.isikukood;
                   var asukoht = document.registration.asukoht;
                   var telefon = document.registration.telefon;
                   var uemail = document.registration.email;
                   var umsex = document.registration.msex;
                   var ufsex = document.registration.fsex; 

                           $.ajax({
                               type:'POST',
                               url: "csv.php",
                               data: {uname:uname.value,uadd:uadd.value,asukoht:asukoht.value,...,...//like this pass the data to the php},
                               dataType:'JSON'
                               success:function(json)
                                       {
                                          //enter your result here.....
                                           return json[0].response;
                                       }

                             }
之所以会发生这种情况,是因为当您使用action属性调用php时,它直接传递值,而不调用JavaScript函数

解决方案:

从html表单中删除action标记和method标记,并使用ValidateEmail函数附加一个ajax,以将数据传递到csv.php文件

示例:

     function ValidateEmail(uemail)

            {
                 //change the last else part to this:
                  else
                   {
                     msg=callPHP();
                     if(msg=="true")
                        alert('Form Succesfully Submitted');
                     else
                         alert('fail Submitted');
                     window.location.reload()
                     return true;
                    }
              }
          function callPHP(){
                     //change the else part  use ajax to call the php here.


                   var uname = document.registration.nimi;
                   var uadd = document.registration.isikukood;
                   var asukoht = document.registration.asukoht;
                   var telefon = document.registration.telefon;
                   var uemail = document.registration.email;
                   var umsex = document.registration.msex;
                   var ufsex = document.registration.fsex; 

                           $.ajax({
                               type:'POST',
                               url: "csv.php",
                               data: {uname:uname.value,uadd:uadd.value,asukoht:asukoht.value,...,...//like this pass the data to the php},
                               dataType:'JSON'
                               success:function(json)
                                       {
                                          //enter your result here.....
                                           return json[0].response;
                                       }

                             }
PHP

      <?php 

                 $name       = $_POST["nimi"]; 
                 $isik       = $_POST["isik"];                      
                 $sugu       = $_POST["sugu"]; 
                 $email      = $_POST["email"]; 
                 $telefon    = $_POST["telefon"]; 
                 $asukoht    = $_POST["asukoht"]; 
                 $lisainfo   = $_POST["lisainfo"]; 
                 $sunniaasta = $_POST["sunniaasta"]; 

                 $cvsData = '"Nimi","Isikukood","sunniaasta","sugu","email","telefon","asukoht","lisainfo"'.PHP_EOL;   
                 $cvsData .= "\"$name\",\"$isik\",\"$sunniaasta\",\"$sugu\",\"$email\",\"$telefon\",\"$asukoht\",\"$lisainfo\"".PHP_EOL; 
                 $fp = fopen("test.csv", "a"); 

                if($fp) 
                    { 
                        fwrite($fp,$cvsData); // Write information to the file 
                        fclose($fp); // Close the file 

                        $data[]=array('respons'=> 'true');
                    } 


                      json_encode($data);


        ?>


希望它能工作…

向我们展示您的验证代码,您是否通过
返回false来阻止默认事件?函数allLetter(uname){var letters=/^[A-Za-z0-9-]/;if(uname.value.match(letters)){return true;}否则{alert('nimi on vale');uname.focus();return false;}请更新您的问题,不要尝试在注释中编写代码。您在哪里执行它?如果我将信息保存到php文件中,您的意思是什么?