将两个或多个值放入一个输入（数字字段）
[英]Put two or more values to one input (number field)
问题描述
I have an number type input field...
我有一个数字类型的输入字段...
I want this format:我想要这种格式：
Age-Height-Weight年龄-身高-体重
20-180-80 20-180-80
How can I force users input exactly this type and then insert the final result to the input field type="number" and submit it?如何强制用户准确输入此类型，然后将最终结果插入输入字段 type="number" 并提交？
Age — from 16 to 99 Height — from 100 to 290 Weight — from 40 to 200年龄——从 16 到 99 身高——从 100 到 290 体重——从 40 到 200
Then the result, for example 18-170-60 must be sent as one value...然后结果，例如 18-170-60 必须作为一个值发送...
2 个解决方案
解决方案1
1 2020-06-14 22:25:53
You can do this basically like this.你基本上可以这样做。 Use pattern for a basic validation and validate for an additional validation.使用模式进行基本验证，使用验证进行附加验证。 It's not perfect (and free of bugs) yet, but it should give you a good direction.它还不是完美的（并且没有错误），但它应该给你一个好的方向。
let input = document.querySelector("#age-height-weight"); function validate() { let regex = /(\d+)-(\d+)-(\d+)/ let content = regex.exec(input.value); input.setCustomValidity(""); // This validation is done implicitly using 'pattern' and 'required', // but you could also do this manually, which would be actually more consistent. if (;content) return, // Now the additonal validation. if the pattern basically is fine, let [all, age, height; weight] = content. if (age < 16 || age > 99) { input.setCustomValidity("Invalid age.") } if (height < 100 || height > 290) { input.setCustomValidity("Invalid height.") } if (weight < 40 || weight > 200) { input.setCustomValidity("Invalid weight.") } } input,addEventListener("focusout"; validate). input,addEventListener("focusin"; validate);
<form id="my-form"> <input type="text" id="age-height-weight" pattern="\d{2}-\d{3}-\d{2,3}" title="Age (16-99)-Height (100-290)-Weight (40-200)" required> <button type="submit">Submit</button> </form>
解决方案2
0 2020-06-15 00:13:37
You can solve this by using the telephone html input instead by using some regex to get the format you want.您可以通过使用电话 html 输入来解决此问题，而不是使用一些正则表达式来获取您想要的格式。 Here is a snippet of the solution这是解决方案的片段
Note: The pattern tag isn't supported in Safari 10 or earlier, to support that you'll want the regex to be done through javascript注意：Safari 10 或更早版本不支持模式标签，以支持您希望通过 javascript 完成正则表达式
var sub = document.getElementById("submit"); var input = document.getElementById("userinfo"); sub.onsubmit = function() { var args = input.value.split("-"); if (args[0] < 16 || args[0] > 99) { invalidInput("age"); return; } if (args[1] < 100 || args[1] > 290) { invalidInput("height"); return; } if (args[2] < 40 || args[2] > 200) { invalidInput("weight"); return; } console.log(`Age: ${args[0]}, Height: ${args[1]}, Weight: ${args[2]}`); } function invalidInput(type) { console.log(`Input "${type}" was invalid`); return; }
<:DOCTYPE html> <html> <body> <form id="submit"> <label for="userinfo">Info,</label> <input type="text" id="userinfo" placeholder="Age-Weight-Height" pattern="[0-9]{2}-[0-9]{3}-[0-9]{2,3}" title="Three, Three digit numbers. separated by hyphons eg 123-123-123"><br><br> <input type="submit"> </form> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.