HTML---input type=“text”输入数字时的验证!(在提交时验证)

本文详细介绍了在HTML中使用正则表达式限制输入框输入的各类数值,包括非负数、正整数、非正整数、负整数、整数、非负浮点数、正浮点数、非正浮点数、负浮点数和浮点数的精确模式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!--非负数:<input type="text" name="" pattern="^\d+$">-->
<!--正整数:<input type="text" name="" pattern="^[1-9]|[1-9][0-9]*$">-->
<!--非正整数:<input type="text" name="" pattern="((-\d+)|0)">-->
<!--负整数:<input type="text" name="" pattern="^-([1-9]|[1-9][0-9])*$">-->
<!--整数:<input type="text" name="" pattern="^-?\d+$">-->
<!--非负浮点数:<input type="text" name="" pattern="^\d+(\.\d+)?$">-->
<!--非负浮点数,可保留一位,二位,三位小数:<input type="text" name="" pattern="^\d+(\.\d{1,3})?$">-->
<!--正浮点数:<input type="text" name="" pattern="^([1-9]+(\.\d+)?|0\.\d+)$">-->
<!--非正浮点数:<input type="text" name="" pattern="^-[0-9]+(\.\d+)?|0$">-->
<!--负浮点数:<input type="text" name="" pattern="^-[0-9]+(\.\d+)?$">-->
<!--浮点数:<input type="text" name="" pattern="^(-?\d+)(\.\d+)?$">-->

原文:https://blog.youkuaiyun.com/huaerxiangwoxiao/article/details/76262172

@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>资料修改</title> <link href="~/Scripts/layui/css/layui.css" rel="stylesheet" /> <script src="~/Scripts/layui/layui.js"></script> <script src="~/Scripts/jquery-3.4.1.js"></script> <style> body { display: grid; place-items: center; /* 核心属性 */ height: 100vh; margin: 0; } form { width: 600px; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } </style> </head> <body> <form class="layui-form"> <!-- 用户编号 --> <div class="layui-form-item"> <label class="layui-form-label">用户账号</label> <div class="layui-input-block"> <input type="text" name="UserCode" lay-verify="required" placeholder="请输入用户账号" autocomplete="off" class="layui-input"> </div> </div> <!-- 用户名称 --> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="UserName" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> </div> </div> <!-- 性别 --> <div class="layui-form-item"> <label class="layui-form-label">性别</label> <div class="layui-input-block"> <input type="radio" name="Sex" value="true" title="男" checked> <input type="radio" name="Sex" value="false" title="女"> </div> </div> <!-- 出生日期 --> <div class="layui-form-item"> <label class="layui-form-label">出生日期</label> <div class="layui-input-inline layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-date"></i> </div> <input type="text" name="BirthDay" id="birthDate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"> </div> </div> <!-- 籍贯 --> <div class="layui-form-item"> <label class="layui-form-label">籍贯</label> <div class="layui-input-block"> <input type="text" name="NativePlace" placeholder="请输入籍贯" autocomplete="off" class="layui-input"> </div> </div> <!-- 地址 --> <div class="layui-form-item"> <label class="layui-form-label">地址</label> <div class="layui-input-block"> <input type="text" name="Address" placeholder="请输入详细地址" autocomplete="off" class="layui-input"> </div> </div> <!-- 密码 --> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-inline layui-input-wrap"> <input type="password" name="Password" lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" lay-affix="eye" class="layui-input"> </div> <div class="layui-form-mid layui-text-em">6-12位字符</div> </div> <!-- 邮箱 --> <div class="layui-form-item"> <label class="layui-form-label">邮箱</label> <div class="layui-input-block"> <input type="text" name="Email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input"> </div> </div> <!-- 电话 --> <div class="layui-form-item"> <label class="layui-form-label">电话</label> <div class="layui-input-block"> <input type="tel" name="Tel" lay-verify="required|phone" autocomplete="off" placeholder="请输入手机号" class="layui-input"> </div> </div> <!-- 状态 --> <!-- 职位ID --> <!--<div class="layui-form-item"> <label class="layui-form-label">职位</label> <div class="layui-input-block"> <select name="PositionID" lay-verify="required" lay-search> <option value="">请选择职位</option> <option value="1">管理员</option> <option value="2">普通员工</option> <option value="3">超级管理员</option> </select> </div> </div>--> <!-- 组织机构ID --> <!--<div class="layui-form-item"> <label class="layui-form-label">组织机构</label> <div class="layui-input-block"> <select name="OrganizationID" lay-verify="required" lay-search> <option value="">请选择组织机构</option> <option value="1">总部</option> <option value="2">技术部</option> <option value="3">市场部</option> </select> </div> </div>--> <div class="layui-form-item"> <div class="layui-input-block"> <button type="submit" class="layui-btn" lay-submit lay-filter="formSubmit">立即提交</button> <button type="submit" class="layui-btn" lay-submit lay-filter="formSubmit2">返回登录</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </body> </html>根据这个代码给我一份合理的修改模板heml的
最新发布
07-08
<think>嗯,用户给了一个HTML代码,看起来是一个用户资料修改的表单页面,使用了Layui框架。用户希望根据这个代码提供一个合理的修改模板。首先,我需要理解原代码的结构和功能。原表单包含了用户账号、用户名、性别、出生日期、籍贯、地址、密码、邮箱、电话等字段,还有一些被注释掉的职位和组织机构选择框。提交按钮有立即提交、返回登录和重置。 用户的需求是修改模板,可能希望优化表单的布局、功能或样式。需要考虑哪些方面呢?首先,表单的可用性和用户体验。比如,密码字段有验证规则(6-12位),但原代码中没有显示提示信息,可能需要添加。其次,注释掉的职位和组织机构选择框是否需要保留?用户可能在犹豫是否需要这些字段,所以建议保留并启用,或者根据需求调整。 另外,表单的响应式设计是否足够?虽然用了Layui的响应式类,但可能需要进一步优化,比如在不同屏幕尺寸下的显示效果。还有表单验证是否全面,比如邮箱和电话是否有正确的验证规则。原代码中的lay-verify属性已经包含了一些验证,但可能需要确认是否满足需求。 接下来,考虑代码的结构和可维护性。例如,重复的代码块是否可以简化,比如使用Layui的表单分组或其他组件来提升可读性。同,样式部分是否有冗余,比如CSS是否可以优化,或者使用更现代的布局方法如Flexbox或Grid来增强布局的灵活性。 还要检查是否有遗漏的功能,比如出生日期的日期选择器是否正确初始化,原代码中有id="birthDate",但可能需要JavaScript代码来绑定日期选择功能。另外,返回登录按钮的类型是submit,但可能应该是一个链接或按钮,点击后跳转到登录页面,而不是提交表单。 安全性方面,密码字段是否应该有强度验证,或者确认密码字段是否需要添加?原表单中没有确认密码的输入框,可能需要添加以确保用户输入正确。此外,文件上传功能是否必要?比如用户头像上传,但原代码中没有,可能需要根据需求决定是否添加。 最后,响应式设计方面,原表单的宽度固定为600px,可能在小屏幕上显示不佳。使用Layui的栅格系统来调整不同设备的列数,比如在手机端堆叠成全宽,在桌面端分成两列,这样可以提高可读性。 总结需要改进的地方:表单验证提示、启用注释掉的下拉框、优化响应式布局、添加确认密码字段、初始化日期选择器、调整按钮行为、优化CSS样式等。然后根据这些点来构建修改后的HTML模板,确保代码结构清晰,功能完善,用户体验良好。</think>以下是一份优化后的修改模板HTML代码(基于原代码结构改进): ```html @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>资料修改</title> <link href="~/Scripts/layui/css/layui.css" rel="stylesheet" /> <script src="~/Scripts/layui/layui.js"></script> <script src="~/Scripts/jquery-3.4.1.js"></script> <style> body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f8f8f8; } .form-container { width: 100%; max-width: 768px; padding: 24px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-radius: 8px; } .layui-form-item .layui-form-label { width: 120px; } .layui-form-item .layui-input-block { margin-left: 120px; } @media (max-width: 768px) { .layui-form-item .layui-form-label { width: 90px; } .layui-form-item .layui-input-block { margin-left: 90px; } } </style> </head> <body> <div class="form-container"> <form class="layui-form"> <!-- 基础信息 --> <fieldset class="layui-elem-field layui-field-title"> <legend>基础信息</legend> </fieldset> <div class="layui-form-item"> <label class="layui-form-label">用户账号</label> <div class="layui-input-block"> <input type="text" name="UserCode" lay-verify="required|username" placeholder="请输入用户账号" autocomplete="off" class="layui-input" disabled> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="UserName" lay-verify="required|nickname" placeholder="请输入用户名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">性别</label> <div class="layui-input-block"> <input type="radio" name="Sex" value="true" title="男" checked> <input type="radio" name="Sex" value="false" title="女"> </div> </div> <!-- 联系信息 --> <fieldset class="layui-elem-field layui-field-title"> <legend>联系信息</legend> </fieldset> <div class="layui-form-item"> <label class="layui-form-label">电话</label> <div class="layui-input-block"> <input type="tel" name="Tel" lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">邮箱</label> <div class="layui-input-block"> <input type="text" name="Email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input"> </div> </div> <!-- 安全设置 --> <fieldset class="layui-elem-field layui-field-title"> <legend>安全设置</legend> </fieldset> <div class="layui-form-item"> <label class="layui-form-label">原密码</label> <div class="layui-input-inline layui-input-wrap"> <input type="password" name="OldPassword" lay-verify="pass" placeholder="请输入原密码" autocomplete="off" lay-affix="eye" class="layui-input"> </div> <div class="layui-form-mid layui-text-em">6-12位字符</div> </div> <div class="layui-form-item"> <label class="layui-form-label">新密码</label> <div class="layui-input-inline layui-input-wrap"> <input type="password" name="NewPassword" lay-verify="pass" placeholder="请输入新密码" autocomplete="off" lay-affix="eye" class="layui-input"> </div> <div class="layui-form-mid layui-text-em">6-12位字符</div> </div> <!-- 其他信息 --> <fieldset class="layui-elem-field layui-field-title"> <legend>其他信息</legend> </fieldset> <div class="layui-form-item"> <label class="layui-form-label">出生日期</label> <div class="layui-input-inline layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-date"></i> </div> <input type="text" name="BirthDay" id="birthDate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">籍贯</label> <div class="layui-input-block"> <input type="text" name="NativePlace" placeholder="请输入籍贯" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">地址</label> <div class="layui-input-block"> <input type="text" name="Address" placeholder="请输入详细地址" autocomplete="off" class="layui-input"> </div> </div> <!-- 权限信息 --> <fieldset class="layui-elem-field layui-field-title"> <legend>权限信息</legend> </fieldset> <div class="layui-form-item"> <label class="layui-form-label">职位</label> <div class="layui-input-block"> <select name="PositionID" lay-verify="required" lay-search> <option value="">请选择职位</option> <option value="1">管理员</option> <option value="2">普通员工</option> <option value="3">超级管理员</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">组织机构</label> <div class="layui-input-block"> <select name="OrganizationID" lay-verify="required" lay-search> <option value="">请选择组织机构</option> <option value="1">总部</option> <option value="2">技术部</option> <option value="3">市场部</option> </select> </div> </div> <!-- 操作按钮 --> <div class="layui-form-item"> <div class="layui-input-block"> <button type="submit" class="layui-btn" lay-submit lay-filter="formSubmit">立即提交</button> <button type="button" class="layui-btn layui-btn-primary" onclick="window.history.back()">返回登录</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> <script> // 初始化日期选择器 layui.use('laydate', function () { var laydate = layui.laydate; laydate.render({ elem: '#birthDate' }); }); // 表单验证规则扩展 layui.use('form', function () { var form = layui.form; form.verify({ username: function (value) { if (!/^[a-zA-Z0-9_]{4,16}$/.test(value)) { return '用户名为4-16位字母、数字或下划线'; } }, nickname: function (value) { if (value.length < 2 || value.length > 20) { return '昵称长度应在2-20个字符之间'; } } }); }); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值