用HTML写一个满足以下条件的代码：1.是一个表格，包含内容有充值的手机号码，三个金额的选项，相应金额的折后价2.当未输入号码时，网页显示未输入手机号码3.当输入手机号码不是11位时，网页显示输入有误，

时间: 2024-03-14 10:50:11 浏览: 52

js验证输入是否为手机号码或电话号码示例

在这个示例中，使用了JavaScript语言的字符串扩展方法以及正则表达式来实现手机号码和电话号码的验证。下面将详细说明示例中所涉及的知识点。知识点1：String.prototype.Trim方法在JavaScript中，String.prototype.Trim方法用于删除字符串两端的空白字符，包括空格、制表符、换行符等。通过正则表达式/^\s*(\S+(\s+\S+)*)\s*$/匹配整个字符串，并返回匹配到的非空白字符序列。如果匹配不到，即认为字符串为空，返回空字符串。这个方法可以用于去除用户输入字符串两端的无用空格，从而使得后续的验证更加准确。知识点2：手机号码验证示例中提供的手机号码验证逻辑是通过正则表达式/^(?:13\d|15[89])-?\d{5}(\d{3}|\*{3})$/来实现的。这个正则表达式的结构如下： - ^: 表示匹配输入字符串的开始。 - (?:13\d|15[89]): 是一个非捕获组，用于匹配手机号码的前三位，可以是13开头后跟任何一位数字，或者158、159。 - -?: 表示可能出现的连字符"-"，但不是必须的。 - \d{5}: 匹配接下来的五位数字。 - (\d{3}|\*{3}): 是一个捕获组，用于匹配最后三位数字，可以是三位数字或者三个星号"*"。 - $: 表示匹配输入字符串的结束。知识点3：电话号码验证示例中还提供了对电话号码的验证逻辑，通过正则表达式/^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/来实现，具体结构如下： - ^: 表示匹配输入字符串的开始。 - ([0\+]\d{2,3}-)? 和 (0\d{2,3})-: 用于匹配国际电话代码部分，第一个捕获组表示可选的国家代码，可以是"0+"加上两位或三位数字，并且跟一个连字符，第二个捕获组匹配区号部分，以0开始，后跟两位或三位数字，并且跟一个连字符。 - (\d{7,8}): 匹配电话号码的主体部分，需要是7到8位数字。 - (-(\d{3,}))?: 表示可选的分机号部分，如果存在，先是一个连字符"-"，后面跟三位或更多的数字。 - $: 表示匹配输入字符串的结束。知识点4：表单验证函数chkForm 在示例中，chkForm函数用于在用户点击按钮时检查输入值是否符合手机号码或电话号码的格式。它将表单中的tel输入框的值调用Trim方法去除两端空格，然后分别调用isMobile和isTel方法进行验证。如果验证通过，则显示输入值，并返回true。如果验证失败，则显示正确的输入格式提示，并返回false。知识点5：HTML表单元素示例中的HTML表单包含一个文本输入框（用于输入电话号码或手机号码），和一个按钮（用于触发验证函数chkForm）。点击按钮后，如果输入的内容符合预定义的手机号码或电话号码格式，则会显示确认信息，否则提示用户输入正确的信息。知识点6：正则表达式的高级特性正则表达式中包含了很多高级特性，例如： - 非捕获组(?:...)：仅用于分组匹配，匹配的内容不会被保存为子匹配。 - 可选项?:：表示前面的字符或组合是可选的，出现零次或一次。 - 量词{min,max}：表示前面的字符或组合可以出现min到max次。 - 正向预查和反向预查：用于在匹配成功后，检查某个条件是否成立，但不消耗字符。综合以上知识点，该示例通过JavaScript以及HTML表单展示了如何实现并使用正则表达式来校验用户输入是否符合手机号码或电话号码的标准格式，确保了输入数据的有效性和准确性。

请看以下代码，满足您所描述的条件： ```html <!DOCTYPE html> <html> <head> <title>充值</title> </head> <body> <h1>充值页面</h1> <form> <label for="phone">手机号码：</label> <input type="tel" id="phone" name="phone" minlength="11" maxlength="11" required><br><br> <label for="amount">选择充值金额：</label> <select id="amount" name="amount"> <option value="50">50元</option> <option value="100">100元</option> <option value="200">200元</option> </select><br><br> <label for="discount">折后价：</label> <input type="text" id="discount" name="discount" readonly><br><br> <input type="submit" value="提交"> </form> <script> let phoneInput = document.getElementById("phone"); let discountInput = document.getElementById("discount"); phoneInput.addEventListener("input", function() { if (phoneInput.value.length !== 11) { discountInput.value = "输入有误"; } else { discountInput.value = ""; // 清空提示信息 } }); document.querySelector("form").addEventListener("submit", function(event) { event.preventDefault(); // 阻止表单默认提交 if (phoneInput.checkValidity()) { // 计算折后价 let amountInput = document.getElementById("amount"); let discount = amountInput.value * 0.9; discountInput.value = discount + "元"; } else { discountInput.value = "未输入手机号码"; } }); </script> </body> </html> ``` 解析： 1. 使用 `<form>` 元素创建表单，包含手机号码输入框、金额选择框和折后价显示框，以及提交按钮。 2. 在手机号码输入框添加 `minlength="11" maxlength="11" required` 属性，限制输入长度为 11，并且不能为空。 3. 在脚本中，使用 `addEventListener()` 方法监听手机号码输入框的 `input` 事件，当输入内容不是 11 位时，在折后价显示框中提示“输入有误”。 4. 在脚本中，使用 `addEventListener()` 方法监听表单的 `submit` 事件，当手机号码输入框的值合法时，计算出折后价，并在折后价显示框中显示；否则，在折后价显示框中提示“未输入手机号码”。同时，使用 `event.preventDefault()` 方法阻止表单默认提交。

阅读全文

用HTML写一个满足以下条件的代码：1.是一个表格，包含内容有充值的手机号码，三个金额的选项，相应金额的折后价2.当未输入号码时，网页显示未输入手机号码3.当输入手机号码不是11位时，网页显示输入有误，

相关推荐

网页版计算器代码HTML手机计算器

仿帮我买手机页面HTML代码

godforsaken-dynamic-width-scroll-table:...可能没有其他人需要此代码

bcow.xyz:bcow.xyz网站的源代码

datatable-java：JAVA版本的DataTable。原作：https：www.cnblogs.comhjzhangarchive201105212052804.html

tabelas.alhur.es：https:tabelas.alhur.es

lukehutscal.com：http：lukehutscal.com

表单电子邮件前端：https：junioralvesbr.github.ioform-email-frontend

jQuery设置表格条件筛选代码.zip

jQuery表格数据条件筛选代码.zip

读取表格数据包：阅读 http://dataprotocols.org/ 标准表格数据包-matlab开发

alifputratehnik.github.io:Faktur表格

ble表格排序显示代码.rar_Table_ble表格排序显示代码_wetjz9

HTML表格代码

在消息框中绘制表格,C#源代码 " ..... \n" +

jQuery UI表格内容拖拽代码.zip

jQuery表格内容修改删除代码.zip

jqGrid表格内容查询读取代码.zip

最新推荐

Element实现表格嵌套、多个表格共用一个表头的方法

基于Python的一个自动录入表格的小程序

用VC设计一个可编辑的表格控件.doc

go 生成基于 graphql 服务器库.zip

WordPress作为新闻管理面板的实现指南

管理建模和仿真的文件

函数与模块化编程宝典：J750编程高效之路

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1， 这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标 求该点的建筑高度（塔外的高度为零)的程序

NPC_Generator：使用Ruby打造的游戏角色生成器

"互动学习：行动中的多样性与论文攻读经历"

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1，这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标求该点的建筑高度（塔外的高度为零)的程序