我正在尝试使用以下验证器 http://1000hz.github.io/bootstrap-validator/为了验证下面的表单，我从验证器插件的文档中复制了大部分元素，当我按下提交按钮时，它总是通过而没有错误。我添加了“data-toggle =”validator”，它说它应该自动验证它。我也尝试使用底部的脚本。有人可以告诉我如何使用它的示例吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="js/bootstrap.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.9.0/validator.min.js"></script>
<h1>Register Below! </h1>
<form data-toggle="validator" role="form" method="post" class="form-horizontal" name="myForm">
<div class="form-group">
<label for="inputName" class="col-md-3 control-label">Name</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputName" name="name" placeholder="Username" required />
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-md-3 control-label">Email</label>
<div class="col-md-6">
<input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" data-error="Incorrect email address" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-md-3 control-label">Password</label>
<div class="form-group col-sm-6">
<input type="password" data-minlength="6" class="form-control" id="inputPassword" name="password" placeholder="Password" required>
<span class="help-block">Minimum of 6 characters</span>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-md-3 control-label">Confirm Password</label>
<div class="form-group col-sm-6">
<input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="The password doesnt match" placeholder="Confirm" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<button type="submit" name="submit" class="btn btn-primary">Register</button>
</div>
</div>
</form>
<script >
(document).ready(function() {
$('#myForm').validator()
$('#myForm').submit(function (e) {
$('#myForm').validator('validate')
});
});
</script>
</body>
</html>
最佳答案
你的方法有几个错误
- 不包含 jQuery 库(必须包含在所有其他 JS 库之上)
- bootstrap.min.js 包含两次(删除一次)
- 缺少
$之前(document).ready(function()在脚本中 - 缺少 ID 选择器
myForm在<form>
代码没有问题
旁注:可以使用属性 data-toggle="validator" 来完成验证或通过 JS 脚本在表单上初始化 $('#myForm').validator() , 两者都不需要。
关于javascript - 1000hz Bootstrap 验证器数据切换 ="validator"不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35288415/