这篇文章的表单验证我只是随便记录下, 望各位看官理解
1. 排序 验证
html 代码
- <div class="layui-form-item">
- <label class="layui-form-label"> 排序 </label>
- <div class="layui-input-block">
- <input type="number" name="sort" autocomplete="off" min="0" max="99999" lay-verify="sort" class="layui-input">
- </div>
- </div>
type="number" 之后文本框的后面就出现如上图那样的效果, 并且只能输入数字和小数点
JS 代码
- layui.use([ "form", "layer" ], function() {
- var form = layui.form;
- var layer = layui.layer;
- // 表单验证
- form.render();// 这句一定要加, 占坑
- form.verify({
- sort:[/^$|^[0-9]{0,5}$/, '只能是数字且范围 0~99999!']// 这个就是上面的排序 lay-verify="sort"
- ,remark: function (value){
- if(value.length> 200){
- return '长度大于 200! 请重新输入';
- }
- }
- });
- });
2. 金额 验证
效果和排序一样
- <div class="layui-form-item">
- <label class="layui-form-label"> 余额 (元)</label>
- <div class="layui-input-block">
- <input type="number" name="balance" id="balance" lay-verify="money"
- autocomplete="off" placeholder="单位: 元"
- class="layui-input">
- </div>
- </div>
的
- layui.use([ "form", "layer", "laydate" ], function() {
- laydate = layui.laydate;
- form = layui.form;
- layer = layui.layer;// 表单验证
- form.render();
- form.verify({
- lenth50 : function(value) {
- if (value.length> 50) {
- return '长度大于 50! 请重新输入';
- }
- },
- lenth400 : function(value) {
- if (value.length> 400) {
- return '长度大于 400! 请重新输入';
- }
- },
- money : function(value) {
- if (value.length> 0) {
- var reg = /(^[0-9]([0-9]+)?(\.[0-9]+)$)|(^(0){1}$)|(^([0-9]+)?$)/;
- if (!reg.test(value)) {
- return '输入格式有误';
- }
- }
- if (value.length> 50) {
- return '长度大于 50! 请重新输入';
- }
- }
- });
- // 下面这段代码主要是用于强制清除当用户输入 0 开头的数字, 比如 0000,02323, 匹配到的话就为 0
- // 如果要在 layui 里面 写 JS 事件之类的代码就一定要放在 use 组件模块里面, 这是其中一个坑!
- $('#balance').bind('input propertychange', function() {
- var balance = $("#balance").val();
- var zero = /^(0){2,}$|^(0)([0-9])?$/;
- if (zero.test(balance)) {
- $('#balance').val(0);
- }
- });
- });
就酱
来源: http://www.bubuko.com/infodetail-2889806.html