朋友们开始通过参考http://formvalidation.io/examples/chang-success-error-colors/进行引导验证
在页面的末尾有一个下载选项。当我单击下载时,他们告诉使用基础、纯、语义和 ui 工具包之类的东西。
我想做他们所做的事——谁能解释一下怎么做?
这是我的小提琴 https://jsfiddle.net/0s9xw5rx/2/
CSS:
.field-error .control-label,
.field-error .help-block,
.field-error .form-control-feedback {
color: #ff0039;
}
.field-success .control-label,
.field-success .help-block,
.field-success .form-control-feedback {
color: #2780e3;
}
HTML
<form id="loginForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Username</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
脚本
$(document).ready(function() {
$('#loginForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
row: {
valid: 'field-success',
invalid: 'field-error'
},
fields: {
username: {
validators: {
notEmpty: {
message: 'The username is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
}
}
}
}
});
});