bootstrap 5 表单验证
2024-04-09 01:28:48
bootstrap 5 表单验证
写在前面
Bootstrap 是一个功能强大、功能丰富的前端工具包。bootstrap 以其优秀的栅格系统，为网页创作带来的极大的方便。目前版本是5.2 。然而在表单验证（formvalidation）它却是收费的,有没有办法使用其它办法来验证Bootstrap5表单？办法是有的。虽然Bootstrap 5 放弃了jQuer,但想要验证我们不得不把jQuer重新拾起来，下面介绍一款使用jQuer来验证表单的前端控件zpjbvalidator.js的使用方法。
zpjbvalidator.js表单验证演示：
bootstrap 5.13
1、邮箱验证
2、密码验证
3、单选框验证
4、多选框验证
5、文本区域验证
6、复选框验证
7、网址验证
8、自定义-最小-最大
9、自定义最小长度-最大长度
10、文件长度-日期等验证
11、远程失败验证
11、远程成功验证
1、 zpjbvalidator的前世今生
zpjbvalidator改编自jbvalidator是一个全新的基于jQuery的表单验证插件，它是为最新的Bootstrap 5框架创建的，理论上支持Bootstrap 3，Bootstrap 4支持客户端和服务器端验证。在原有功能基础上，修改了其核心代码。为了区别与源代码，将文件名更改为zpjbvalidator.js
1.1、原jbvalidator所具有的功能：
- 支持多语言。
- 支持自定义错误信息。
- 支持自定义验证规则。
- 支持HTML自定义属性…
1. 2、zpjbvalidator在jbvalidator的基础上增加如下功能：
- 原jbvalidator只有两种验证状态，成功与失败，zpjbvalidator增加了loading状态。
- 修改了其核心代码，多语言支持的代码段。
- 对外暴漏了成功调用代码段，这对远程验证是有帮助的。
- Options 选项增加了loading的状态。
- 由于是基于jQuery依赖的，增加了对jQuery版本的判断与jQuery是否被加载的判断。
- 客户端远程验证由ajax更改为axios。
- axios远程验证增加了验证超时判断，并对远程超时增加了三次重新连接发送验证字段，如果三次没有连接成功将接到错误消息并显示出来。
- 理论上支持bootstrap3、bootstrap4、bootstrap5以上所有验证，因为是基于HTML5的。
- Query需要 1.9.1或更高版本。
- 新增多选下拉框验证。注：原jbvalidator的多选下拉框是不可用的也可以说是一bug,在使用时可以删除351行至376行多选下拉框的内容。本次保留了原jbvalidator下拉框的内容以做区别之用。
2、安装
2.1、loading样式加载
<link href="../assets/vendor/jbvalidator/zpjbvalidator.css" rel="stylesheet">
2.2、bootstrap5 核心验证加载
<script src="../assets/vendor/jbvalidator/zpjvalidator.js"></script>
3、 字段说明
- Html 5 验证
- data-v-equal: 验证两个INPUT框中的内容是否相等，这对密码验证是有用的。
- data-v-min-select: 下拉多选框最少选项
- data-v-max-select: 下拉多选框最大选项
- data-checkbox-group: 组复选框元素的父属性
- data-v-min: min属性的替代，它可以用于属性类型文本
- data-v-max: Max属性的替代，这可以用于属性类型文本
- data-v-min-length: minlength属性的替代
- data-v-max-length: maxlength属性的替代
- data-v-min-size: 输入类型文件最小文件大小(字节)
- data-v-max-size: 输入类型文件最大文件大小(字节)
- data-v-message: 错误消息替代
- class="select-parent form-control"：在添加下拉多选框时必须添加一个"div 将下拉多选框包裹其中
4、 使用方法
- validator: 添加新的自定义验证
- checkAll(formSelector = null, event = null): 显示错误而不提交表单，返回错误计数
- errorTrigger(inputSelector, message): 显示从服务器返回的错误消息.
- successTrigger(inputSelector, message): 显示从服务器返回的成功消息.
- loadingTrigger(inputSelector, message): 显示等待从服务器返回消息.
- reload(): 添加动态元素后重新加载实例
4.1、如何使用
表单的form属性必须是 novalidate <form novalidate>
<script src="dist/jbvalidator.min.js"></script>
<script>$(function () {let validator = $('form.needs-validation').jbvalidator({errorMessage: true,//如果为flase则不显示错误信息successClass: true,//如果为flase则不显示成功信息//可以使用英文与中文如果用英文使用en.jsonlanguage: '../assets/js/validation/lang/cn.json'});var valid = validator.validator;//新的自定义验证方法valid.password = function (el, event) {if ($(el).is('[name=password]') && $(el).val().length < 5) {return '密码必须包含字母、数字和特殊字符，且在6~18位之间.';}return '';}valid.UserName = function (el, event) {if ($(el).is('[name=username]') && $(el).val().length < 2) {return '用户名不能有数字字符！且在2~18位之间.';}}});</script>
4.2、 服务器验证
- 您可以显示从服务器返回的错误消息。".errorTrigger"方法可以用于此目的。
- .errorTrigger(element, message)
- 您也可以显示从服务器返回的成功消息。".successTrigger"方法可以用于此目的。
- .successTrigger(element, message)
- 您还可以显示等待消息返回从服务器端。".loadingTrigger,"方法可以用于此目的。
- .loadingTrigger,(element, message)
<script src="dist/jbvalidator.min.js"></script>
<script>$(function () { let validatorServerSide = $('form.validatorServerSide').jbvalidator({//是否显示服务端验证成功与失败信息true:显示flase：不显示errorMessage: true,successMessage: true,loadingMessage: true language: '../assets/js/validation/lang/cn.json'});//serversideconst eamil = document.querySelector('input[name=email]');$(document).on('change', '.validatorServerSide', function () {//实例化axiosconst _AXIOS = axios.create()var message = 'loading...'//等待服务器返回消息validatorServerSide.loadingTrigger($('[name=email]'), message)//获取邮箱验证状态var ce = eamil.validity;//如果required（必填项）与pattern（正则验证)通过则if (ce.valueMissing === false && ce.patternMismatch === false) {let obj = { email: eamil.value }// 添加请求拦截_AXIOS.interceptors.request.use(function (config) {//let userinfo = window.sessionStorage.getItem('token')let userinfo = window.localStorage.getItem("token")// 判断token存在再做配置if (userinfo) {//let token = JSON.parse(userinfo).tokenconfig.headers.authorization = userinfo} else {config.headers.authorization = '0000'}return config}, function (error) {// 请求错误做一些事情 return Promise.reject(error);});// 添加响应拦截_AXIOS.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {var config = err.config;// 如果config不存在或没有设置重试选项，则拒绝 if (!config || !config.retry) return Promise.reject(err);// 设置用于跟踪重试计数的变量 config.__retryCount = config.__retryCount || 0;//检查我们是否已经把重试的总次数加到了最大值 if (config.__retryCount >= config.retry) {// Reject with the errorreturn Promise.reject(err);}// 增加重试次数config.__retryCount += 1;//创造新的promise来处理指数后退 var backoff = new Promise(function (resolve) {setTimeout(function () {resolve();}, config.retryDelay || 1);});// 返回调用axios以重试请求的promise return backoff.then(function () {return _AXIOS(config);});});_AXIOS({method: 'POST',url: "valid/valid-email",data: obj,timeout: 10000, //超时时间起作用必须实例化一下axiosretry: 3, //请求超时重新发起请求retryDelay: 1000 //失败请求之间等待的毫秒数（默认为 1）;重新发起请求间隔}).then((response) => {if (response.data) {var { code, message } = response.data//服务器返回code：200为成功其它为失败if (code == 200) {validatorServerSide.successTrigger($('[name=email]'), message)}else {validatorServerSide.errorTrigger($('[name=email]'), message)}} else {throw new Error(`${response.status} ${response.statusText} ${response.url}`);}}).catch((error) => {message = '出现错误服务器没有响应，请检测网络' + errorvalidatorServerSide.errorTrigger($('[name=email]'), message)});return false;}});});</script>
4.3 Options选项
{language: '', //json 文件存放地址errorMessage: true,successMessage: true,loadingMessage: true,html5BrowserDefault: true,validFeedBackClass: 'valid-feedback',invalidFeedBackClass: 'invalid-feedback',loadingFeedBackClass: 'loading-feedback',successFeedBackClass: 'success-feedback',validClass: 'is-valid',invalidClass: 'is-invalid',loadingClass: 'is-loading',successClass: 'is-success'
}
5、注意事项
- 使用下拉框多选项需要加载Bootstrap-select 本例使用的版本为 v1.14.0-beta3
- 下载地址：http://developer.snapappointments.com/bootstrap-select/
- 本例Bootstrap v5.1.3
- 下载地址：https://getbootstrap.com/
- 本例jQuery-3.60
- 下载地址：https://jquery.com/
- 如果使用axios远程验证请加载axios
- 下载地址：npm i axios
bootstrap 5 表单验证相关推荐
- bootstrap html5 表单验证,基于Bootstrap+jQuery.validate实现表单验证
这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤 ...
- bootstrap的表单验证 vue_vue-form（vue表单验证插件 vue2.2+） 使用指南
vue-form 是一个在vue 中用于表单验证的插件 目前版本为4.1.1 ??Form validation for?Vue.js 2.2+ import VueForm from 'vue-fo ...
- bootstrap的表单验证 vue_第45天：Web表单
在了解了 Flask Bootstrap 基本框架之后,我们来了解一下 Flask 框架的 表单( form ),以帮助我们创建交互式的 Web 应用,最后会有个提交个人信息的例子. Flask-WT ...
- bootstrap的表单验证 vue_分享几个基于Vue的UI库和开源项目
阅读本文大概需要 3.6 分钟. 题图:Evan You(尤雨溪)的工作室 在编程的世界里,你遇到的 90% 问题,别人都遇到过,并且提供了比较优秀的解决方案.我们无需一行一行代码从零开始创建一个项目 ...
- bootstrap validate表单验证
引入js文件 <script src="js/bootstrapValidator.min.js" type="text/javascript">& ...
- Bootstrap表单验证插件bootstrapValidator使用方法整理
插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...
- 黄聪： Bootstrap之Form表单验证神器： BootstrapValidator（转）
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
- bootstrap 表单验证
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
最新文章
- 【事故反演】配置过程（变位）
- Python 封装MySQL类
- 非常恶俗地分享一首歌曲(子陵·周郎顾)
- 专注计算机专业知识讲授,计算机一级考试MS Office上机指导
- 第4次作业类测试代码+105032014065+方绎杰
- python 中的运算符重载
- 十九、Math和Random类
- 扫描无法传送到计算机,文件无法从复印机扫描到电脑？可能是以下操作您没有注意到...
- python怎么自动化录入数据_报表自动化怎么做？Excel，Python，还是它？
- Ubuntu切换桌面显示管理器
- 磊科linux无线网卡驱动安装步骤,怎么安装磊科nw336无线网卡驱动
- 秒杀活动，怎么设计全套技术方案
- Feign - Error while extracting response for type [class java.lang.String]
- 天下大事必作于细，聊聊腾讯兼容测试的升级“打怪”历程
- 【Linux】/lib/ld-linux.so.2: bad ELF interpreter: No such file or directory
- python cookie动态请求_Python请求自动处理cookie
- 欧拉角，轴角，四元数与旋转矩阵详解
- 普通家电秒变智能，同为（TOWE）智能联动节能插排APZ-1014UMC3
- 《正面管教》思维导图图解，找对教育孩子好方法
- java新特性-函数式接口-作为方法参数-作为方法的返回值-常用函数式接口-Supplier-Consumer-Predicate-Function