网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
jbvalidator是基于bootstrap5框架的表单验证插件,同时支持客户端和服务器端验证。
更多功能:
多种语言。
自定义错误消息。
自定义验证规则。
通过HTML数据属性易于使用。
1. 在html页面中加载bootstrap5框架。
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>
2. 将novalidate属性添加到form元素,并使用以下HTML数据属性将验证器应用于表单字段:
data-v-equal:password字段的id,其中的值应该相同
data-v-min-select:应选择最小数量的选项
data-v-max-select:允许选择的最大选项数
data-checkbox-group:group checkbox元素的父属性
data-v-min-select:应选择最小数量的复选框
data-v-required:需要父属性
data-v-min:最小值
data-v-max:最大值
data-v-min-length:最小长度
data-v-max-length:最大长度
data-v-min-size:最小大小
data-v-max-size:最大大小
data-v-message:自定义错误消息
<form class="example" novalidate>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="name@example.com" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" class="form-control" id="password" title="password" required>
</div>
<div class="form-group">
<label for="password">Confirm Password</label>
<input name="repassword" type="password" class="form-control" data-v-equal="#password" required>
</div>
<div class="form-group">
<label>URL</label>
<input type="url" class="form-control" placeholder="http://www" required>
</div>
<div class="form-group">
<label>Using Regex</label>
<input type="text" class="form-control" pattern="[0-9]+" title="Only number." required>
</div>
<div class="form-group">
<label>Custom Min/Max Values</label>
<input type="text" class="form-control" data-v-min="10" data-v-max="100">
</div>
<div class="form-group">
<label>Custom Min/Max Length</label>
<input type="text" class="form-control" data-v-min-length="5" data-v-max-length="10">
</div>
<div class="form-group">
<label>Multiple Select</label>
<select class="form-select" multiple data-v-min-select="2" data-v-max-select="3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</div>
<div class="form-group">
<label>Textarea</label>
<textarea class="form-control" minlength="10" maxlength="165"></textarea>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1" >
<label class="form-check-label" for="defaultCheck1">
checkbox 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" >
<label class="form-check-label" for="defaultCheck2">
checkbox 2
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck3" >
<label class="form-check-label" for="defaultCheck3">
checkbox 3
</label>
</div>
</div>
<div class="form-group">
<label>File Input</label>
<input type="file" class="form-control" data-v-min-size="400" data-v-max-size="450">
</div>
<div class="form-group">
<label>Date Input</label>
<input type="date" class="form-control" min="2020-10-20">
</div>
<div class="form-group">
<label>Custom message</label>
<input type="text" class="form-control" minlength="10" data-v-message="Please enter minimum 10 characters" required>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>
3. 激活表单验证插件并确定JSON语言的路径。
let validator = $('form.example').jbvalidator({
language: 'dist/lang/en.json'
});
4. 重写默认错误消息或创建自己的局部变量,如中所示en.json.
{
"maxValue": "You cannot enter a number greater than %s.",
"minValue": "Please enter a number greater than %s.",
"maxLength": "Please use maximum %s character. You are using %s characters.",
"minLength": "Please use minimum %s character, you are using %s characters.",
"minSelectOption": "Please select at least %s options.",
"maxSelectOption": "Please select at most %s options.",
"groupCheckBox": "Please select at least %s options.",
"equal": "This field does not match %s",
"fileMinSize": "File size cannot be less than %s bytes.",
"fileMaxSize": "File size cannot be more than %s bytes.",
"number": "Please write a number."
}
5. 这些示例显示了如何在服务器端验证表单字段。
$(document).on('submit', '.example', function(){
$.ajax({
method:"get",
url:"test.json",
data: $(this).serialize(),
success: function (data){
if(data.status === 'error') {
validatorServerSide.errorTrigger($('[name=username]'), data.message);
}
}
})
return false;
});
6. 您还可以使用JavaScript创建自己的验证规则。
validator.validator.custom = function(el, event){
if($(el).is('[name=password]') && $(el).val().length < 5){
return 'Your password is too weak.';
}
}
7.确定是否在有效时将成功应用于表单字段。默认值:false。
let validator = $('form.example').jbvalidator({
language: 'dist/lang/en.json',
successClass: true
});
8. 重写默认的CSS类。
let validator = $('form.example').jbvalidator({
validFeedBackClass: 'valid-feedbak',
invalidFeedBackClass: 'invalid-feedback',
validClass: 'is-valid',
invalidClass: 'is-invalid'
});
转载请注明来源:bootstrap5多种语言表单验证插件(jbvalidator)
本文永久链接地址:https://www.moyouyouw.cn/code/858.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论