layui input type=‘number‘ 限制不能输负数问题

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站

 方法1:

<input type="number" min="0" class="layui-input stock" value="{{item.stock}}" />

设置min='0'最小为0就不会出现负数

方法2:

主要是后面的<input type="number" placeholder="请输入赠送数量" value="0" min="0" οnchange="addkk()" οnkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-.]+/,'');}).call(this)" οnblur="this.v();" >

方法3:

 <input type="text" name="Number" lay-verify="required|integer" placeholder="请输入" value="" autocomplete="off" class="layui-input">
layui.use('form', function () {
            var $ = layui.$
                , layer = layui.layer
                , form = layui.form

           form.verify({
           integer: [
               /^[1-9]\d*$/
               , '只能输入正整数'
           ]
         });
     });

以之前对话中的收费项目管理为模版,修改该代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>收费项目明细管理</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css"> <style> .x-nav { padding: 0 20px; position: relative; z-index: 99; border-bottom: 1px solid #e5e5e5; line-height: 60px; } .x-body { padding: 20px; } .layui-table td, .layui-table th { padding: 9px 15px; } .td-manage a { margin: 0 5px; } .dialog-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; display: flex; justify-content: center; align-items: center; } .dialog-content { background: #fff; padding: 20px; border-radius: 5px; width: 800px; max-height: 90vh; overflow-y: auto; } .x-red { color: red; } </style> </head> <body> <div id="app"> <!-- 面包屑导航 --> <div class="x-nav"> <span class="layui-breadcrumb"> <a>首页</a> <a>收费管理</a> <a><cite>收费项目明细列表</cite></a> </span> <a class="layui-btn layui-btn-sm" style="float:right" href="javascript:location.replace(location.href)" @click="refresh"> <i class="layui-icon layui-icon-refresh"></i> 刷新 </a> </div> <div class="x-body"> <!-- 操作栏 --> <div class="layui-row"> <a class="layui-btn" href="promx_add.html"> <i class="layui-icon layui-icon-add-1"></i> 添加收费项目明细 </a> </div> <!-- 数据表格(移除备注列) --> <table class="layui-table"> <thead> <tr> <th>ID</th> <th>所属小区</th> <th>收费项目</th> <th>应收金额(¥)</th> <th>实收金额(¥)</th> <th>缴费时间</th> <!-- 调整列顺序 --> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item, index) in detailList" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.x_id}}</td> <td>{{ item.m_id }}</td> <td>{{ item. e_amount}}</td> <td>{{ item.a_amount }}</td> <td>{{ item.pay_Time }}</td> <!-- 移除原备注列 --> <td class="td-manage"> <a @click="editItem(index)" title="编辑"> <i class="layui-icon layui-icon-edit"></i> </a> <a @click="deleteItem(index)" title="删除"> <i class="layui-icon layui-icon-delete"></i> </a> </td> </tr> </tbody> </table> </div> </div> <!-- 编辑弹框 --> <div v-if="dialogVisible" class="dialog-mask"> <div class="dialog-content"> <h3>{{ dialogTitle }}</h3> <form class="layui-form layui-form-pane"> <input type="hidden" v-model="formData.id"> <div class="layui-form-item"> <label class="layui-form-label"> <span class='x-red'>*</span>所属小区 </label> <div class="layui-input-block"> <input type="text" v-model="formData.x_id" placeholder="请入所属小区编号" class="layui-input" lay-verify="required"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"> <span class='x-red'>*</span>收费项目编号 </label> <div class="layui-input-block"> <input type="text" v-model="formData.m_id" placeholder="请入项目编号" class="layui-input" lay-verify="required"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"> <span class='x-red'>*</span>应付费用 </label> <div class="layui-input-block"> <input type="text" v-model="formData.e_amount" placeholder="请入应付金额" class="layui-input" lay-verify="required"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"> <span class='x-red'>*</span>实付费用 </label> <div class="layui-input-block"> <input type="text" v-model="formData.a_amount" placeholder="请入实付金额" class="layui-input" lay-verify="required"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"> <span class='x-red'>*</span>支付时间 </label> <div class="layui-input-inline"> <!-- 关键:保留唯一id用于绑定日期选择器 --> <input class="layui-input" v-model="formData.pay_Time" placeholder="点击选择日期" id="checkInDate" lay-verify="required"> </div> </div> <div class="layui-form-item"> <button class="layui-btn layui-btn-primary" type="button" @click="dialogVisible = false">取消</button> <button class="layui-btn" type="button" @click="submitForm">确定</button> </div> </form> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script> <script> // 获取收费明细数据(与原逻辑一致) function getDetailData() { const data = localStorage.getItem('detailData'); const defaultData = [ { id: '3', x_id: '林科大小区', m_id: '厕所广告位1', e_amount: 500, a_amount: 500,pay_Time: '2020-01-05' }, { id: '2', x_id: '林科大小区', m_id: '垃圾桶', e_amount: 50, a_amount: 50,pay_Time: '2020-01-05' }, { id: '1', x_id: '林科大万府', m_id: '停车位', e_amount: 500, a_amount: 500,pay_Time: '2020-01-05' } ]; try { return data ? JSON.parse(data) : defaultData; } catch (error) { console.error('localStorage数据解析失败,使用默认数据', error); return defaultData; } } new Vue({ el: '#app', data: { proList: getDetailData(), dialogVisible: false, dialogTitle: '编辑收费项目', currentIndex: -1, formData: { id: '', x_id: '', m_id: '', a_amount:'', e_amount: '', pay_Time: '' } }, mounted() { this.initLayui(); }, methods: { initLayui() { layui.use(['form', 'laydate', 'layer'], () => { window.layer = layui.layer; // 预加载laydate模块(关键:为弹框初始化做准备) this.laydate = layui.laydate; layui.form.render(); }); }, refresh() { this.detailList = getDetailData(); layer.msg('刷新成功', {icon: 1}); }, // editItem(index) { // const item = this.detailList[index]; // window.open(`pro_detail_edit.html?id=${item.id}`, '_blank'); // }, editItem(index) { this.dialogTitle = '编辑收费项目'; this.currentIndex = index; this.formData = JSON.parse(JSON.stringify(this.detailList[index])); this.dialogVisible = true; // 关键修改:弹框显示后初始化日期选择器 this.$nextTick(() => { // 重新渲染日期选择器并设置当前值 this.laydate.render({ elem: '#checkInDate', // 绑定入框的id max: '2099-12-31', value: this.formData.pay_Time, // 显示当前记录的创建时间 done: (value) => { this.formData.pay_Time = value; // 选择日期后更新数据 } }); }); }, deleteItem(index) { const _this = this; layer.confirm('确定要删除这条记录吗?', function(){ _this.detailList.splice(index, 1); localStorage.setItem('detailData', JSON.stringify(_this.detailList)); _this.detailList = [..._this.detailList]; layer.msg('删除成功', {icon: 1}); }); }, submitForm() { if (!this.validateForm()) return; this.proList.splice(this.currentIndex, 1, this.formData); localStorage.setItem('proData', JSON.stringify(this.detailList)); this.dialogVisible = false; this.detailList = [...this.detailList]; layer.msg('编辑成功', {icon: 1}); }, validateForm() { if (!this.formData.x_id) { layer.msg('请入所属小区', {icon: 5}); return false; } if (!this.formData.m_id) { layer.msg('请入项目编号', {icon: 5}); return false; } if (!this.formData.a_amount) { layer.msg('请入应付金额', {icon: 5}); return false; } if (!this.formData.e_amount) { layer.msg('请入实付金额', {icon: 5}); return false; } if (!this.formData.m_id) { layer.msg('项目名称不能为空', {icon: 5}); return false; } if (!this.formData.pay_Time) { layer.msg('请选择创建时间', {icon: 5}); return false; } return true; }, } } ); </script> </body> </html>
07-04
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值