Question

我有以下Javascript代码：

function checkIfValid(){
    var form = document.createuserform;

    if(form.fName.value == "" || form.lName.value == "" || form.pass.value == "" || !isValidEmail()){
    alert("Please Ensure All Fields Are Filled In Correctly");
    }else{
    //submit form
    form.submit();
    }
}

function isValidEmail(){
    var x=document.forms["createuserform"]["email"].value
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
    {
    return false;
    }
    return true;
}

这是创建用户页面。 javascript检查输入的数据是否有效，然后将表单提交给php应用程序，然后将数据存储在数据库中......

这是HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Create User</title>
<script src="http://dev.speechlink.co.uk/David/js/createuser.js" type="text/javascript"></script>
</head>

<body>
<h1>Create User</h1>

<p>Please fill in the details below to create a new user account</p>

<form name = "createuserform" action = "http://dev.speechlink.co.uk/David/createuser.php" method = "post">
<p>First Name:&nbsp;&nbsp;&nbsp;&nbsp;<input name = "fName" type="text" size="25"></p>

<p>Last Name:&nbsp;&nbsp;&nbsp;&nbsp;<input name = "lName" type="text" size="25"></p>

<p>E-mail:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name = "email" type="text" size="25"></p>

<p>Password:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name = "pass" type="text" size="25"></p>

<p> Gender:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="gender" value="M" checked> Male
<input type="radio" name="gender" value="F"> Female</p>

<p>User Type: &nbsp;&nbsp;&nbsp;&nbsp;<select name="usertype"> 
<option>Athlete</option>
<option>Support Staff</option>
</select></p>

<p><input type ="button" value="Create Account" name = "createuser" onclick="checkIfValid()"></p>
</form>
</body>
</html>

php代码如下：

<?php

session_start();

$dbh = connect();

//connect to database
function connect() {
  $dbh = mysql_connect ("localhost", "abc123", "def567") or die ('I cannot connect to the database because: ' . mysql_error());
  mysql_select_db("PDS", $dbh); 
  return $dbh;
}

//insert into database
if (isset($_POST['createuser'])){

    //prevent SQL injections (this version of php does not support mysqli functions)
    $fn = mysql_real_escape_string($_POST['fName']);
    $ln = mysql_real_escape_string($_POST['lName']);
    $email = mysql_real_escape_string($_POST['email']);
    $gender = mysql_real_escape_string($_POST['gender']);
    $usertype = mysql_real_escape_string($_POST['usertype']);
    if($usertype == 'Athlete'){
      $usertype = 'Athletes';
    }else{
      $usertype = 'SupportStaff';
    }
    $pass = md5($_POST['pass']);

    if(eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email)) {

        $query= "SELECT * FROM $usertype WHERE email = '" . $email . "'";
        $result = mysql_query($query);

        if(mysql_num_rows($result) < 1 || !mysql_num_rows($result)) {

            $query= "INSERT INTO $usertype (fName, lName, gender, email, password) VALUES ('$fn', '$ln', '$gender', '$email', '$pass')";
            mysql_query($query);
            mysql_close($dbh);
            echo ("&result=true&");         
        } else {
            mysql_close($dbh);
            echo "&result=userexists&";         
        }
    }
    else {
        mysql_close($dbh);
        echo "&result=false&"; //invalid e-mail address
    }   
}
?>

当我使用HTML表单中的提交按钮直接POST到它时，php工作。但是当我使用javascript时，页面是有针对性的，但它是空白的......没有回音......有什么想法吗？

我有一种感觉，表单没有捕获HTML按钮触发javascript的'createuser'名称...因为我的php文件需要设置$ _POST ['createuser'] ...也许它不是...？

Answer 1

由于您没有按下名为“createuser”的按钮，“createuser”不是发送到服务器的数据的一部分。

因此，您应该在表单中插入一个隐藏字段并检查此内容，而不是检查“createuser”。

Answer 2

对我来说有什么突出的问题如下：

这应该返回false

<input type ="button" value="Create Account" name = "createuser" onclick="checkIfValid();return false"></p>

这也应该返回false：

function checkIfValid(){
    var form = document.createuserform;

    if(form.fName.value == "" || form.lName.value == "" || form.pass.value == "" || !isValidEmail()){
        alert("Please Ensure All Fields Are Filled In Correctly");
        return false; 
    }else{
        //submit form
        form.submit();
    }
}

我的想法是它没有通过验证，但仍在提交。

Answer 3

控制台中是否有JS错误？

如果不是，请尝试使用此代码进行验证功能

function checkIfValid(){
    var form = document.createuserform;
    if(form.fName.value == "" || form.lName.value == "" || form.pass.value == "" || !isValidEmail()){
    alert("Please Ensure All Fields Are Filled In Correctly");
        return false;
    }else{
    //submit form
        return true;
    }
}

这个按钮的代码

<input type ="submit" value="Create Account" name = "createuser" onclick="return checkIfValid();" />

JavaScript通过POST提交HTML表单

3 个答案: