Question

我想知道如何启动某些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，我可以将其设为红色或弹出。我怎么能这样做？

Answer 1

您可以使用表单上的onChange事件来调用验证函数。然后使用.style()方法更改css。

Answer 2

所以，这就是我从你的问题中得到的东西。你想要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属性，以确保用户必须在字段中添加内容。

如何使用Bootstrap进行表单验证？

2 个答案: