如何使用Bootstrap進行表單驗證？

我想知道如何啓動特定的JavaScript函數來製作一個紅色的標籤，或者用twitter引導來彈出一個空白字段等。如何使用Bootstrap進行表單驗證？

我有一個表格，像這樣：

<form role="myForm" id="sign-up-form" method="post" action="/sign-up"> 
    <div class="form-group"> 
     <label for="exampleInputEmail1">Email</label> 
     <input type="email" class="form-control" id="exampleInputEmail1" name="email"> 
    </div> 
    <div class="form-group"> 
     <label for="exampleInputPassword1">Password</label> 
     <input type="password" class="form-control" id="exampleInputPassword1"> 
    </div> 
    <input type="submit" value="Next: Connect Shopify" class="btn btn-success"> 
    </form>

我有一個路線，像這樣：

app.post("/sign-up", function (req, res) { 

    console.log(req.body); 
    res.render('sign-up'); 
});

我想知道如何處理表單驗證。就像空間是空的一樣，使用Bootstrap JavaScript，我可以使它紅色或彈出。我怎樣才能做到這一點？

來源

2017-02-05 Farhan Syed

您可以使用窗體上的onChange事件來調用驗證函數。然後使用.style()方法更改css。

來源

2017-02-05 03:05:19

所以，這是我從你的問題得到的。你想JS功能

驗證輸入
改變UI
或添加彈出來提醒用戶已離開該領域的空白

這一切都可以簡單地做通過JavaScript或JQuery。

如果我們遵循您在問題中提供的模板（HTML），那麼腳本下面會做你想要的。我還添加了必要的評論來幫助你。

<input id="submit" type="submit" value="Next: Connect Shopify" class="btn btn-success" onClick="submit()">

這是一個非常基本的功能，讓您知道如何使用javascript更改樣式並查看某個字段的值。

function submit() { 
    if (document.getElementById('exampleInputEmail1') === '' || typeof document.getElementById('exampleInputEmail1') === 'undefined') { 
    document.getElementById('exampleInputEmail1').style.color = 'red'; 
    return; 
    } else if (document.getElementById('exampleInputPassword1') === '' || typeof document.getElementById('exampleInputPassword1') === 'undefined') { 
    document.getElementById('exampleInputEmail1').style.color = 'red'; 
    return; 
    } 
    return; 
}

但是，我建議你應該使用jquery來做這些事情。還可以在輸入字段中使用required屬性以確保用戶必須在字段中添加某些內容。

來源

2017-02-05 05:42:47

例如，一旦我點擊該按鈕並且它發出了一個發佈請求/註冊，例如，如果用戶名/電子郵件已被佔用，我將如何警告用戶例如警報（）？ –

Usename只能在服務器端知道，所以你必須發送一個標誌來知道它在客戶端的用戶名是像userNameAvailable = false。然後，在客戶端，如果userNameAvailable爲false，則可以應用檢查以顯示用戶警報。 –

如何使用Bootstrap進行表單驗證？

回答

相關問題