我正在尝试为Twitter Bootstrap使用jQuery插件,该插件提供用于直观显示用户输入密码质量的规则集。
This is how that plugin is working...
但我的问题是,当我尝试在我的项目中使用它时,似乎它无法正常工作。文字显示相应,但米栏不起作用..
这是我的 HTML -
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-3 control-label">username</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-3 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
</div> <div class="form-group">
<label for="strenth" class="col-sm-3 control-label">Strenth</label>
<div class="col-sm-5">
<!-- <div id="messages"></div> -->
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-5">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
我的jQuery -
jQuery(document).ready(function () {
var options = {
onLoad: function () {
$('#messages').text('Start typing password');
},
onKeyUp: function (evt) {
$(evt.target).pwstrength("outputErrorList");
}
};
$(':password').pwstrength(options);
});
到目前为止这是我的所有代码的JSBIN
希望有人可以帮助我... 谢谢。
答案 0 :(得分:1)
将您的css路径替换为
http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css
在head
标记