Javascript 使用 PHP 进行客户端验证

Question

下面是一些 javascript 我在简单表单上进行的验证。我第一次点击提交时，验证将起作用并触发和错误消息。如果出现错误，请输入仍然不正确的新值，然后再次点击提交，验证将不再有效，这些值将传递到我的 php 表单。

这是javascript

<script type="text/javascript" language="javascript"> 
<!--
function validateMyForm ( ) { 
    var isValid = true;
    if ( document.form1.gamedate.value === "Select One" ) { 
            document.getElementById("errorMessage").innerHTML = ( "Please select a game" ); 
            isValid = false;
    } else if ( document.form1.wteam.value === "Select One" ) { 
            document.getElementById("errorMessage").innerHTML = ( "Please select the winning team" ); 
            isValid = false;
    } else if ( document.form1.wscore.value === "Select One" ) { 
            document.getElementById("errorMessage").innerHTML = ( "Please select the winning score" ); 
            isValid = false;
    } else if ( document.form1.lscore.value === "Select One" ) {
            document.getElementById("errorMessage").innerHTML = ( "Please select the losing score");
            isValid = false;
    } else if ( document.form1.wscore.value <= document.form1.lscore.value ){
            document.getElementById("errorMessage").innerHTML = ( "Winning score must be larger than the losing score");
            isValid = false;
    }
    return isValid;
}
//-->
</script>

php 使用 ******* 表单删除某些数据

<form action="*********" method="post" name="form1">
      <div class="form-group">
           <label>Game Date:</label>
           <select name="gamedate">
               <option>Select One</option>
               <?php
               $stmt = $db->prepare("***********)");
               $stmt->execute(array(':**********' => $_SESSION['**********']));
                 while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                 echo '<option value="';
                 echo $row['*********'];
                 echo '">';
                 echo $row['*********'];
                 echo '</option>';
                 }
               ?>
           </select>
      </div>
      <div class="form-group">
           <label>Winning Team</label>
           <select name="wteam">
               <option>Select One</option>
               <option value="1">Home</option>
               <option value="0">Opponent</option>
           </select>
       </div>
       <div class="form-group">
            <label>Winning Score</label>
            <select name="wscore">
                <option>Select One</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>          
            </select>
       </div>
       <div class="form-group">
            <label>Losing Score</label>
            <select name="lscore">
                <option>Select One</option>
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>  
            </select>
       </div>
       <div class="form-group">
       <input type="submit" value="Submit" onclick="javascript:return validateMyForm();">      
</form>

对我做错了什么有什么想法吗？

Answer 1

从错误的地方调用了您的验证函数。它应该从表单的 onsubmit 方法调用，而不是提交按钮的 onclick 方法：

<form action="*********" method="post" name="form1" onsubmit="return validateMyForm()">

Answer 2

Javascript 验证很棒，但是您也应该在 PHP 表单处理程序中执行相同的验证步骤。然后，如果它没有通过 PHP 表单处理程序的验证，您将再次重定向回包含您的表单的页面。最好预先填写有效字段并注明哪些字段需要更正。

Javascript 验证应被视为服务器端验证的附加组件。

@danl 这是一些基本的 PHP 验证。我不确定你的 gamedate 变量应该是什么格式来检查它。其他的都很基础

$haserror=false;

$gamedate=$_POST['gamedate'];
//not sure what is valid for gamedate.  But you should check it against something
if(strlen($gamedate)<1){
    $haserror=true;
    $errordetail.=' Game Date must be selected';
}

$wteam=$_POST['wteam'];
if(!(($wteam==1) || ($wteam==0))){
    $haserror=true;
    $errordetail.=' Winning team must be selected';
}

$wscore=$_POST['wscore'];
if(!is_numeric($wscore)){
    $haserror=true;
    $errordetail.=' Winning score does not appear to be a valid number';
}
$lscore=$_POST['lscore'];
if(!is_numeric($lscore)){
    $haserror=true;
    $errordetail.=' Losing score does not appear to be a valid number';
}

if($lscore > $wscore){
    $haserror=true;
    $errordetail.=' Losing score should not be more than the winning score.';
}

if($haserror){
   echo $errordetail;
   exit();
}
else{
   echo'  Success! .  Process the data here';
}

Answer 3

您试图在 javascript 中获取下拉菜单的值，但随后您将其与下拉菜单的文本进行比较。为默认下拉选项分配值并与这些选项进行比较，或者更改 javascript 以获取文本（例如 "Select One"）。

Javascript 使用 PHP 进行客户端验证

Javascript client side validation with PHP

javascript

php

forms

validation