帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jQuery+bootstrap5表单验证插件(jbvalidator)

帝国模板之家 2020-11-05 网页特效 评论

jbvalidator是一个新的基于jQuery实现的表单验证插件,支持最新bootstrap5框架客户端和服务器端验证。

功能:

  1. 多种语言。

  2. 自定义错误消息。

  3. 自定义验证规则。

  4. 自定义HTML数据属性。

使用方法:

1.加载最新的jQuery JavaScript库和bootstrap5框架。

<link rel="stylesheet" href="bootstrap.min.css" />
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

2.可以 添加novalidate属性 ,和验证器可以使用的HTML表单字段data属性:

  1. data-v-equal:id的密码字段的值应该是相同的
  2. data-v-min-select:允许选择的最小数
  3. data-v-max-select:允许选择的最大数
  4. data-checkbox-group:父复选框组元素的属性
  5. data-v-required:必填
  6. data-v-min:最小值
  7. data-v-max:最大值
  8. data-v-min-length:最小长度
  9. data-v-max-length:最大长度
  10. data-v-min-size:最小尺寸
  11. data-v-max-size:最大尺寸
  12. 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. 设置插件语言

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. 自定义验证规则

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'
});

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言