javascript - 实时验证在表 php、ajax、javascript 中添加/更新数据

Question

可以帮我解决这个问题吗？

我有一个表格，并且添加了 2 个按钮来添加或更新信息。

我想在“描述”字段中进行验证，其中**您只能写入字母且少于 255 个字符，而在 “名称” 字段中您只能写入少于 50 个字符。无论如何，我无法分别单击“保存”或“添加”按钮(按钮被锁定，直到一切正确)。

此外，页面必须显示“实时(在单击按钮之前)每个字段中的错误”。

这是我在表中添加新信息时的代码:

<?php include('connect.php'); 
    $error="";

    if(isset($_POST['btnsave']))
    {
        $career_id=$_POST['carrera'];
        $name=$_POST['txtname'];
        $description=$_POST['txtdescription'];
        $hourss=$_POST['txthours'];

        if($_POST['txtid']=="0")
        {
            $a_sql=mysql_query("INSERT INTO subjects VALUES('','$career_id','$name','$description','$hourss')");
            if($a_sql)
            {
                header("location:index.php");//
            }
        }else{
            echo "Update";
        }
    }

    $sqlm = mysql_query("SELECT * FROM careers");
    $options = "";
    while($result = mysql_fetch_array($sqlm)){
            $options .= "<option value='".$result['id']."'>".$result['name']."</option>";
    }
?>

    <h2 align="center">ADD NEW SUBJECT</h2>
    <form method="Post">
        <table align="center">
                <tr>    
                    <td>Career:</td>
                    <td><select name='carrera'><?php echo $options; ?></select><input type="hidden" name="txtid" value="0" /></td>
                </tr>
                <tr>    
                    <td>Name:</td>
                    <td><input type='text' name='txtname'/></td>
                </tr>
                <tr>    
                    <td>Description:</td>
                    <td><input type='text' name='txtdesription'/></td>
                </tr>
                <tr>    
                    <td>Hours:</td>
                    <td>
                        <select name='txthours'/>
                            <option <?php if($hourss=='1') echo 'selected' ; ?> value="2">2 (two)</option>
                            <option <?php if($hourss=='1') echo 'selected' ; ?> value="4">4 (our)</option>
                            <option <?php if($hourss=='1') echo 'selected' ; ?> value="6">6 (six)</option>
                            <option <?php if($hourss=='1') echo 'selected' ; ?> value="8">8 (eight)</option>
                            <option <?php if($hourss=='1') echo 'selected' ; ?> value="10">10 (ten)</option>
                        </select>
                    </td>
                </tr>
                <tr>    
                    <td></td>
                    <td><input type='submit' value=save name='btnsave'/></td>
                </tr>
        </table>
    </form>

另一个代码更新表中的信息:

<?php include('connect.php'); 
    $error="";
    if(isset($_GET['edit']))
    {
        $ident=$_GET['iden'];
        $row=mysql_query("SELECT * FROM subjects WHERE id=$ident");
        $st_row=mysql_fetch_array($row);
    }
?>

    <h2 align="center">UPDATE SUBJECT</h2>
    <form method="Post" action=''>
        <table align="center">
            <tr>    
                <td>Career:</td>
                <td><input type='text' name='txtcarreras_id' value="<?PHP echo $st_row['career'] ?>"/></td>
                </tr>
            <tr>    
                <td>Name:</td>
                <td><input type='text' name='txtnombre' value="<?PHP echo $st_row['name'] ?>"/></td>
            </tr>
            <tr>    
                <td>Description:</td>
                <td><input type='text' name='txtdescripcion' value="<?PHP echo $st_row['description'] ?>"/></td>
            </tr>
            <tr>    
                <td>Hours:</td>
                <td><input type='text' name='txtcarga_horaria' value="<?PHP echo $st_row['hours'] ?>"/></td>
            </tr>
            <tr>    
                <td></td>
                <td><input type='submit' value="save" name='btnsave'/></td>
            </tr>
        </table>
    </form>

<?php
    if(isset($_POST['btnsave']))
    {
        $career_id=$_POST['txtcarreras_id'];
        $name=$_POST['txtnombre'];
        $description=$_POST['txtdescripcion'];
        $hours=$_POST['txtcarga_horaria'];

        $a_sql=mysql_query("UPDATE materias SET career='$career_id', name='$name', description='$description', hours='$hours' WHERE id='$ident'");
            if($a_sql)
            {
                header("location:index.php");
            }
        }
?>

我知道，有很多方法可以解决这个问题，但我想要最好的方法!

希望你能帮助我:)

谢谢!

Answer 1

您可以使用 Javascript 来做到这一点。使用 Jquery 或其他库就更容易了。

使用 jQuery:

$('input[name=txtname]').keyup(function() {
  if ($(this).val().length < 50) {
    // Do Error stuff here
  } else {
    // Remove error stuff here
  }
});

如果您有 jQuery 并使用上面的 keyup 事件处理程序，它应该在您键入时显示。