如何使用javascript驗證我的表單

我想驗證我的表單使用JavaScript。在表單提交之前，我希望服務器在字段輸入下方顯示錯誤（如果有）..如何在此代碼中執行此操作使用外部JavaScript文件？如何使用javascript驗證我的表單

這裏是我的代碼：

<!DOCTYPE HTML> 
    <html> 
    <head> 
    <style> 
    .error {color: #FF0000;} 
     .label_text { 
float: left; 
width: 44%; 
text-align:right; 
font-weight:bold; 
color:purple; 
} 
.register1{ 
text-align:center;} 
.header_tag{text-align:center; 
font-weight:bold; 
color:green;} 
.header_tag1{ margin:10px; 
float:left; 
text-align:center; 
font-weight:bold; 
color:green} 
.register_section{border:1px solid black; 
text-align:center; 
padding:20px; 
margin-left:30%; 
margin-right:30%; 
float:none; 
height:350px; 
} 
.input{ text-align:left; 
float:left; 
border:2px solid black; 
} 
.gender{float:left;} 
.register{ float:left; 
text-align:center; 
color:green; 
font-weight:bold; 
padding:10px; 
margin-left:36%;} 
    </style> 
    </head> 

    <body> 

    <?php 
    // define variables and set to empty values 
    $nameErr = $passwordErr = $password2Err = $emailErr = $genderErr = ""; 
    $name = $password = $confirmpassword = $email = $gender = $description = ""; 
$result=""; 

    if ($_SERVER["REQUEST_METHOD"] == "POST") { 
     $username = ""; 
    $password = ""; 
    $hostname = ""; 
    //connection to the database 
    $dbhandle = mysql_connect($hostname, $username, $password) 
    or die("Unable to connect to MySQL"); 
    echo "Connected to MySQL<br>"; 
    //select a database to work with 
    $selected = mysql_select_db("test",$dbhandle) 
     or die("Could not select test"); 

     if (empty($_POST["name"])) { 
     $nameErr = "Name is required"; 
     } else { 
     $name = test_input($_POST["name"]); 
     if (!preg_match("/^[a-zA-Z ]*$/",$name)) { 
      $nameErr = "Only letters and white space allowed"; 
     } 
     } 
     if (empty($_POST["password"])) { 
     $passwordErr = "Password is required"; 
     } else { 
     $password = test_input($_POST["password"]); 
     } 
     if (empty($_POST["confirmpassword"])) { 
     $password2Err = "Confirm Password"; 
     } else { 
     $password = test_input($_POST["confirmpassword"]); 
     } 
     if ($_POST['password']!= $_POST['confirmpassword']) 
    { 
     echo("Oops! Password did not match! Try again. "); 
    } 

     if (empty($_POST["email"])) { 
     $emailErr = "Email is required"; 
     } else { 
     $email = test_input($_POST["email"]); 
     if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { 
      $emailErr = "Invalid email format"; 
     } 
     } 

     if (empty($_POST["description"])) { 
     $comment = ""; 
     } else { 
     $comment = test_input($_POST["description"]); 
     } 

     if (empty($_POST["gender"])) { 
     $genderErr = "Gender is required"; 
     } else { 
     $gender = test_input($_POST["gender"]); 
     } 

    if (empty($genderErr)) 
    {if (empty($emailErr)){ 
     if (empty($password2Err)){ 
      if (empty($passwordErr)){ 
       if (empty($nameErr)){ 

      $result=mysql_query("SELECT * FROM person WHERE username ='$name' AND password='$password'AND Email='$email'"); 
    if (mysql_num_rows($result)==0 ) 
     { // IF no previous user is using this username. 


       $result1=mysql_query("INSERT INTO person(username,password,Email,Gender) VALUES ('$name', '$password','$email','$gender')"); 


       { if($result1) 
       ////If the Insert Query was successfull. 

        // Send an email 

        // Finish the page: 
        { 
        echo '<div class="success">Thank you for registering! A confirmation email has been sent to ' . $email . ' </div>'; 

       } 
       else 
       { // If it did not run OK. 
        echo '<div class="errormsgbox">You could not be registered due to a system error. We apologize for any inconvenience.</div>'; 
       } 
       } 

      } 


      // The username is not available. 
      else 
      { echo '<div class="errormsgbox" >That username has already been registered.</div>'; 
      } 
      } 
     } 
    } 
     } 
    } 
    } 



    function test_input($data) { 
     $data = trim($data); 
     $data = stripslashes($data); 
     $data = htmlspecialchars($data); 
     return $data; 
    } 

    ?> 
<div class="register1"> 
    <h2 class="header_tag">REGISTER HERE</h2> 
    <p><span class="error"></span></p> 
    <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> 
      <div class="register_section"> 
    <div class="label_text"> 
     Name:<span class="error">* </div> 
    <div class="input"> 
    <input type="text" name="name"><br> </div> 
     <span class="error"><?php echo $nameErr;?></span> 
     <br><br> 
     <div class="label_text"> 
     Password:<span class="error">* </div> 
     <div class="input"> 
     <input type="text" name="password"><br> </div> 
     <span class="error"><?php echo $passwordErr;?></span> 
     <br><br> 
     <div class="label_text"> 
     Confirm Password:<span class="error">* </div> 
     <div class="input"> 
     <input type="text" name="confirmpassword"><br> </div> 
     <span class="error"><?php echo $password2Err;?></span> 
     <br><br> 

     <div class="label_text"> 
     E-mail:<span class="error">* </div> 
     <div class="input"> 
     <input type="text" name="email"><br></div> 
     <span class="error"><?php echo $emailErr;?></span> 
     <br><br> 
     <div class="label_text"> 
     Description: </div> 
     <div class="input"> 
     <textarea name="description" rows="5" cols="22"></textarea> </div> 
     <br><br> 
     <div class="label_text"> 
     Gender:<span class="error">* </div> 
     <div class="gender"> 
     <input type="radio" name="gender" value="female">Female 
     <input type="radio" name="gender" value="male">Male 
     </div> 
     <span class="error"><?php echo $genderErr;?></span> 
     <br><br><br> 
     <div class="register"> 
     <input type="submit" name="submit" value="REGISTER"> 
     <br> 
     <h3 class="header_tag1">"<a href="login_access.php">Back to Login</a> 
     </div> 

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



    </body> 
    </html>

來源

2015-01-15 newemployee

既然你是新來的，我會說你想先在這裏參觀一下：http://stackoverflow.com/tour然後你想讀這個：http://stackoverflow.com/help/how-to - 最後，你想創建一個MCVE http://stackoverflow.com/help/mcve – Rizier123 2015-01-15 18:11:27

我們感謝您避免聊天室的發言 - 它使它看起來像你不能打擾一些額外的字符以使您的問題可讀，並且通常會導致某些人進行編輯工作。清晰，簡潔的問題，以前的研究和努力，在這裏非常感謝！ – halfer 2015-01-15 18:18:11

糟糕！ 'test_input'使用所有可能的過濾函數**，除了正確的**之外。你需要在這裏使用'mysql_real_escape_string'。修剪很好，但'stripslashes'錯誤，'htmlspecialchars'屬於輸出層，而不是輸入。 – halfer 2015-01-15 18:21:46

你所試圖做的是正確地稱爲客戶端驗證。

最簡單的方法是使用第三方庫，如FormValidation。

例如，驗證您的電子郵件領域，你可以這樣做：

<form method="post" id="register_user" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> 
    ... 
    <input type="text" name="email" data-fv-emailaddress="true" data-fv-emailaddress-message="The value is not a valid email address" /> 
    ... 
</form> 

<script> 
$('#register_user').submit(function() { 
    $('#register_user').formValidation(); 
}); 
</script>

當然，你需要確保包括jQuery的，FormValidation必要的CSS和JS庫，並一個合適的內容框架（如Bootstrap）。

爲了記錄，如果您只是在尋找一個基本的用戶管理腳本，我強烈建議您避免重新發明輪子。以現有腳本爲例，例如UserFrosting，並對其進行修改以滿足您的需求。

來源

2015-01-15 20:03:21 alexw

如何使用javascript驗證我的表單

回答

相關問題