如何添加表單驗證以及提醒

Question

我正在製作一個簡單的註冊表單。到目前爲止，我有表單驗證工作，但我不知道如何讓警報工作。這個想法是讓用戶填寫他們的信息，點擊提交，並且會彈出一個提示他們提供的信息。我如何添加警報來完成這項工作？

HTML：

<div class="sign-up"> 
       <form> 
        <h2>Sign Up</h2> 
        <label>Name:</label> 
        <input type="text" placeholder="Enter your name" value="" id="suName" required> 
        <label>Email:</label> 
        <input type="email" name="email" id="suEmail" required placeholder="Enter a valid email address"> 
        <label>Password:</label> 
        <input type="password" placeholder="Enter your password" name="password" id="suPassword" required> 
        <input class="submit-button su-submit" type="submit" id="mySUButton"> 
       </form> 
      </div> 

JS：

function setBindings() { 

    $(".sign-up form #mySIButton").click(function (e) { 
     e.preventDefault(); 

     var suName = $(".sign-up form #suName").val(), 
      email = $(".sign-up form #suEmail").val(), 
      pw = $(".sign-up form #suPassword").val(), 

      alert("This is your entered information: " + suName.value + ", " + email.value + ", " + pw + "."); 
    }); 
} 


$(document).ready(function() { 
    setBindings(); 
}); 

Answer 1

你有一些錯誤，這就是爲什麼你的代碼不工作。您只需編寫以下的jQuery代碼實現這一點：

$("#mySUButton").click(function (e) { 
    e.preventDefault(); 
    var suName = $("#suName").val(); 
    var email = $("#suEmail").val(); 
    var pw = $("#suPassword").val(); 
    if(suName=="" || email=="" || pw=="") 
    { 
     alert("All fields required"); 
     return false; 
    } 
    else if (IsEmail(email) == false) 
    { 
     alert("Invalid Email ID"); 
     return false; 
    } 
    alert("This is your entered information: " + suName+ ", " + email + ", " + pw + "."); 
    }); 

function IsEmail(email) { 
     var atpos = email.indexOf("@"); 
     var dotpos = email.lastIndexOf("."); 
     if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) { 
      return false; 
     } 
    } 

Answer 2

不需要.value再jQuery功能.val()下返回值

試試這個：

var suName = $("#suName").val(); 
      var email = $("#suEmail").val(); 
     var pw = $("#suPassword").val(); 

      alert("This is your entered information: " + suName+ ", " + email+ ", " + pw + "."); 

Answer 3

剛擡起頭，你不應該密碼保存爲一個字符串，並能夠反映回給用戶（如在警報）。你總是希望使用passsword哈希算法（在我看來，bcrypt通常是最好的），因爲在數據庫中存儲明文密碼使得它們非常容易被利用。

這就是說，我認爲你需要一個事件處理程序，比如當點擊提交時，你的javascript函數被調用，並且彈出警報。因爲它應該提交給你的數據庫（假設你的後端已經設置好了），但我不認爲JavaScript函數會被調用。

Answer 4

使用onSubmit形式標記驗證表單

function setBindings() { 
 
     var suName = $("#suName").val(); 
 
     var email = $("#suEmail").val(); 
 
     var pw = $("#suPassword").val(); 
 
     var isValid = true; 
 
     if(suName==""){ 
 
      alert("Name can't be empty"); 
 
      isValid = false; 
 
     } 
 
     if(email=="" && isValid){ 
 
      alert("Email can't be empty"); 
 
      isValid = false; 
 
     } 
 
     if(pw=="" && isValid){ 
 
      alert("Password can't be empty"); 
 
      isValid = false; 
 
     } 
 
     if(pw.length < 6 && isValid){ 
 
      alert("Password can't be less than 6 character"); 
 
      isValid = false; 
 
     } 
 
     return isValid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sign-up"> 
 
       <form onSubmit="return setBindings();"> 
 
        <h2>Sign Up</h2> 
 
        <label>Name:</label> 
 
        <input type="text" placeholder="Enter your name" value="" id="suName" > 
 
        <label>Email:</label> 
 
        <input type="email" name="email" id="suEmail" placeholder="Enter a valid email address"> 
 
        <label>Password:</label> 
 
        <input type="password" placeholder="Enter your password" name="password" id="suPassword" > 
 
        <input class="submit-button su-submit" type="submit" id="mySUButton"> 
 
       </form> 
 
      </div>

我刪除HTML驗證，required屬性來測試JavaScript驗證。