Question

我一直在尝试使用bootstrap和jQuery验证表单。我在这里看了其他类似的问题，但没有一个解决方案能解决我的问题。我目前的代码是

<form>
 <div class="form-group">
     <label class="control-label" for="email">Email:</label>
     <div class="input-group">
         <input class="form-control" placeholder="Enter your email address" name="emailAdd" type="text" />
     </div>
  </div>
  <div class="form-group">
        <label class="control-label" for="password">Password:</label>
        <div class="input-group">
             <input class="form-control" placeholder="Enter your password" name="passWord" type="text" />
        </div>
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
</form>

我的剧本就是这个

$("form").validate({
rules: {
    emailAdd: {
        required: true
    },
    passWord: {
        required: true
    }
},
highlight: function(element) {
    $(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
    $(element).closest('.form-group').removeClass('has-error');
}
});

我真的迷失了为什么这不起作用，并尝试过我在网上看过的很多不同的解决方案。如果有人能够指出我正确的方向，我会感激它！

编辑：

我引用jQuery并验证插件如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

理想情况下，我希望能够将登录和注册限制为某些电子邮件域。所以我认为这将是一个很好的开始。在按下提交之前，电子邮件和密码字段必须填充一些值。如果没有，我想突出显示红色框，并说“场是必需的”，或类似的东西。目前，当我按下提交按钮时，页面只会刷新。

很抱歉在原帖中没有提供足够的信息！

Answer 1

您好，加载依赖项时遇到一个问题。 jquery.validate.js需要jquery.js，你必须按顺序加载。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script>

如果您没有使用电子邮件验证，则需要添加属性email：true

emailAdd: {
        required: true,
        email: true
    },

了解它的工作原理：

https://jsfiddle.net/gph2Lz2z/

美好的一天！

Answer 2

试试这个在HTML中

<form action="#" onsubmit="submitForm();return false">


<div class="form-group">
     <label class="control-label" for="email">Email:</label>
     <div class="input-group">
         <input class="form-control" placeholder="Enter your email address" name="emailAdd" type="text" id="email" required/>
     </div>
  </div>
  <div class="form-group">
        <label class="control-label" for="password">Password:</label>
        <div class="input-group">
             <input class="form-control" placeholder="Enter your password" name="passWord" type="text" id="password" required/>
        </div>
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
</form>

在jquery中

function submitForm(){
var email = $('#email').val();
var password= $('#password').val();
}

使用jQuery进行引导程序表单验证

2 个答案: