在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:longbow-validate开源软件地址:https://gitee.com/LongbowEnterprise/longbow-validate开源软件介绍:客户端数据验证框架网页程序自然离不开数据的更新与保存,更新与保存前的数据验证我们称之为 客户端数据验证 ,本框架提供了一种非常简单的客户端数据验证方法 通过简单的 html 样式名称或者属性名框架与相关验证方法进行关联,控件失去焦点或者点击验证按钮时触发客户端验证逻辑 在线演示单页面演示:http://longbowenterprise.gitee.io/slidercaptcha/ 快速开始组件依赖 jQuery bootstrap ValidateCSS<link href="./lib/twitter-bootstrap/css/bootstrap.min.css"> 将引入样式表的 <link> 标签复制并粘贴到 <head> 中,并放在所有其他样式表之前。 JS<script src="./lib/jquery/jquery.min.js"></script><script src="./lib/twitter-bootstrap/js/bootstrap.bundle.min.js"></script><script src="./lib/validate/jquery.validate.js"></script><script src="./lib/validate/localization/messages_zh.min.js"></script><script src="./dist/longbow.validate.js"></script> 将引入脚本的 <script> 标签复制并粘贴到 <body> 最后面。 用法要验证的网页代码示例 <div class="card"> <div class="card-header">网站名称设置</div> <div class="card-body" data-toggle="LgbValidate" data-valid-button="[data-method='title']"> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control" id="sysName" placeholder="请输入网站标题,50字以内" value="网站标题" maxlength="50" data-valid="true" /> <div class="input-group-append"> <button class="btn btn-secondary" type="button" data-method="title">保存</button> </div> </div> </div> </div></div>
效果图左图为数据不合规时样式,右图为数据合规时样式 内置验证规则
扩展验证规则$.validator.addMethod("userName", function (value, element) { return this.optional(element) || /^[a-zA-Z0-9_@.]*$/.test(value);}, "登录名称不可以包含非法字符"); 通过静态方法 Api获得某个控件的验证组件框架实例 获得某个验证域内所有组件是否合规 参与贡献
|
2022-08-15
2022-08-17
2022-09-23
2023-10-27
2022-08-18
请发表评论