[英]How can I validate inputs using this regex within a function?
So i have a regex which i hope is sufficient to match my date input data.所以我有一个正则表达式,我希望它足以匹配我的日期输入数据。
I want to validate the dates before the getSum() function is executed.我想在执行 getSum() function 之前验证日期。 And if it does not match, I want to alert the user with some text.
如果不匹配,我想用一些文本提醒用户。
I was thinking I need an If Else statement somewhere in the getSum function, but I am not sure where to put it.我在想我需要在 getSum function 的某处使用 If Else 语句,但我不知道该放在哪里。 As you can see, the getSum function first loops over an array of inputs, then within a.forEach, it extracts the value from each input field.
如您所见,getSum function 首先循环输入数组,然后在 a.forEach 中,从每个输入字段中提取值。
I thought that this might be the place to begin an if else statement, because this is the point where the two inputs have their values determined.我认为这可能是开始 if else 语句的地方,因为这是两个输入确定其值的点。 I just need a way to compare those two values against my regex, and if they match, run the rest of the code as normal.
我只需要一种方法将这两个值与我的正则表达式进行比较,如果它们匹配,则正常运行代码的 rest。 And if they dont match, then an else statement with an alert.
如果它们不匹配,则带有警报的 else 语句。
Im not sure how to write this out.我不确定如何写出来。
var sumButton = document.querySelector(".sumNumbers");
sumButton.addEventListener("click", getSum);
var dateRegEx = /(0\d{1}|1[0-2])\/([0-2]\d{1}|3[0-1])\/(19|20)\d{2}/;
function getSum() {
let inputs = ['dateInput1', 'dateInput2'];
let outputs = ['result1', 'result2'];
inputs.forEach(function(input, index) {
const inputValue = document.getElementById(input).value;
var sum = 0;
for (var i = 0; i < inputValue.length; i++) {
const num = parseInt(inputValue.charAt(i));
if (!isNaN(num)) {
sum += num;
}
}
const total = (sum - 1) % 9 + 1;
document.getElementById(outputs[index]).textContent = "Your number is: " + total;
});
}
<form action="">
<div class="container">
<div class="cell-1" id="centerElement">
<div id="cell-1-nest-l"></div>
<div id="cell-2-nest-l"></div>
<div id="cell-3-nest-l"></div>
<div id="cell-4-nest-l"><h3>your name</h3></div>
<div id="cell-5-nest-l"></div>
<div id="cell-6-nest-l"><input type="text"
class="nameStyle1" id="nameInput1" ></div>
</div>
<div class="cell-2" id="centerElement" ><img
src="file:///Users/Nineborn/Downloads/My%20Post%20(5).png" alt=""
class="sumNumbers"></div>
<div class="cell-3" id="centerElement" >
<div id="cell-1-nest"></div>
<div id="cell-2-nest"></div>
<div id="cell-3-nest"><h3>their name</h3></div>
<div id="cell-4-nest"></div>
<div id="cell-5-nest"><input type="text"
class="nameStyle1" id="nameInput2"></div>
<div id="cell-6-nest"></div>
</div>
<div class="cell-4" id="result1">
<input type="date" class="dateStyle1 reset"
id="dateInput1">
</div>
<div class="cell-5"><input type="reset"></div>
<div class="cell-6" id="result2">
<input type="date" class="dateStyle2" id="dateInput2"
placeholder="Their Bday">
</div>
<div class="cell-7"></div>
<div class="cell-8"></div>
<div class="cell-9"></div>
</div>
</form>
Put if (inputValue.match(dateRegEx))
around the code that calculates the sum.将
if (inputValue.match(dateRegEx))
放在计算总和的代码周围。
When you use <input type="date">
, the format of the returned value is YYYY-MM-DD
, not how it shows in the input field, which is formatted in whatever way is appropriate for the locale.当您使用
<input type="date">
时,返回值的格式是YYYY-MM-DD
,而不是它在输入字段中的显示方式,它以适合区域设置的任何方式格式化。 So you need to adjust the regexp accordingly.所以你需要相应地调整正则表达式。
Also, you should have ^
and $
anchors in the regexp so that it matches the entire input.此外,您应该在正则表达式中有
^
和$
锚点,以便它匹配整个输入。 Otherwise it will look for the pattern anywhere in the input.否则它将在输入中的任何位置查找模式。
var sumButton = document.querySelector(".sumNumbers"); sumButton.addEventListener("click", getSum); var dateRegEx = /^(19|20)\d{2}-(0\d{1}|1[0-2])-([0-2]\d{1}|3[0-1])$/; function getSum() { let inputs = ['dateInput1', 'dateInput2']; let outputs = ['result1', 'result2']; inputs.forEach(function(input, index) { const inputValue = document.getElementById(input).value; if (inputValue.match(dateRegEx)) { var sum = 0; for (var i = 0; i < inputValue.length; i++) { const num = parseInt(inputValue.charAt(i)); if (;isNaN(num)) { sum += num; } } const total = (sum - 1) % 9 + 1. document.getElementById(outputs[index]):textContent = "Your number is; " + total. } else { document.getElementById(outputs[index]);textContent = "You entered an invalid date " + inputValue; } }); }
Enter dates: <input type="date" id="dateInput1"> <input type="date" id="dateInput2"> <br> <button type="button" class="sumNumbers">Calculate sums</button> <div id="result1"></div> <div id="result2"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.