带有验证的 HTML 表单[关闭]答案

【问题标题】：HTML form with validation [closed]带有验证的 HTML 表单[关闭]
【发布时间】：2014-01-23 08:45:52
【问题描述】：

我有一个带有验证功能的 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>

您会在下面看到我的所有验证功能：

function formValidation() {

    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; 

    {
    if(allLetter(uname)) {

        if(alphanumeric(uadd)) { 
            var telefon = document.registration.telefon;
            var uemail = document.registration.email;
            var umsex = document.registration.msex;
            var ufsex = document.registration.fsex; 
        {

        if(allLetter(uname)) {
            if(alphanumeric(uadd)) { 
                if(koht(asukoht)) {
                    if(allnumeric(telefon)) {
                        if(ValidateEmail(uemail)) {
                            if(validsex(umsex,ufsex)) {
                            }
                        } 
                    }
                } 
            }
        }

    }
}

return false;

function allLetter(uname) { 
    var letters = /^[A-Za-z0-9- ]/;
    if(uname.value.match(letters)) {
        return true;
    } else {
        alert('nimi on vale');
        uname.focus();
        return false;
    }
}

function alphanumeric(uadd) { 
    var letters = /^[0-9]{11}$/;
    if(uadd.value.match(letters)) {
        return true;
    } else {
        alert('vale isikukood');
        uadd.focus();
         return false;
    }
}

function koht(asukoht) {
    if(asukoht.value == "Default") {
        alert('Palu vali midagi listist');
        asukoht.focus();
        return false;
    } else {
        return true;
    }
}

function allnumeric(telefon) { 
    var numbers = /^[0-9]+$/;
    if(telefon.value.match(numbers)) {
        return true;
    } else {
        alert('Telefoninumbris tohivad olla ainult numbrid');
        telefon.focus();
        return false;
    }
}

function ValidateEmail(uemail) {
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if(uemail.value.match(mailformat)) {
        return true;
    } else {
        alert("Vale email");
        uemail.focus();
        return false;
    }
} 

function validsex(umsex,ufsex) {
    x=0;

    if(umsex.checked) {
        x++;
    } 
    if(ufsex.checked) {
        x++; 
    }
    if(x==0) {
        alert('Select Male/Female');
        umsex.focus();
        return false;
    } else {
        alert('Form Succesfully Submitted');
        window.location.reload()
        return true;
    }
}

以及与表单值交互的文件 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 
        } 
    } 
?>

感谢您的关注！

【问题讨论】：

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

标签： javascript php html csv

【解决方案1】：

问题：

这只是因为当你用你的 action 属性调用 php 时，它直接传递值而不调用你的 JavaScript 函数。

解决方案：

从您的 html 表单中删除操作标记和方法标记，并在您的 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);


        ?>

希望它会起作用......

【讨论】：