在textarea字段中修剪和计数手机号码

Question

我在表单中有一个textarea字段，我可以在其中复制粘贴(或键入)手机号码。它将每行有一个数字，像这样我可以复制粘贴(或类型)数千个手机号码提交到该表单。
我想修剪该字段，我只希望在复制粘贴(或键入)后在该字段中保留10位数字。
只有有效的10位数字应该保留，所有其他无效的数字应该自动从该字段中删除。
示例:
如果我将这些数字粘贴到textarea字段中，

9848012345
9949123450
9949123456
99491234
99491234561
[phone]
9848098765

字段中只保留10位数字，如下所示:

9848012345
9949123450
9848098765

<form class="form" method="post" action="" enctype="multipart/form-data">
<div class="form-group row">
<label for="title" class="col-lg-2 col-form-label">Mobile Numbers </label>                         
<div class="col-lg-10">
<textarea onKeyUp="countline()" type="text" class="form-control required" required 
cols="10" rows="7" id="mobileno" name="mobileno"> </textarea>
</div>
</div>
<div class="form-group row">
<label class="col-lg-2 control-label " for="userName">Number Count </label>
<div class="col-lg-10">
<input type="text" class="form-control " readonly id="numbercount" required name="numbercount" value="">
</div>
</div>
<div class="form-group row">
<div class="col-lg-12 text-center">
<button type="submit" name="submit" class="btn btn-success btn-lg waves-effect waves-light m-r-10">SUBMIT </button>
</div>
</div>
</form>     

使用这个脚本(onKeyUp="countline()")来计数数字(行)。这个也要留着。

<script>
function countline() {
var length = $('#mobileno').val().split("n").length;
document.getElementById("numbercount").value = length;
}
</script>

尝试添加一个按钮作为验证。但是，在为修剪数字添加此按钮后，表单提交操作不工作。

const
textArea = document.getElementById("mobileno"),
validateEl = document.getElementById("validate");
validateEl.addEventListener("click", validate);
function validate(e) {  
const filtered = textArea.value
.split("n")
.filter(number => number.length === 10)
.join("n");
textArea.value = filtered;
}

请帮忙。提前谢谢。

Answer 1

正则表达式用于模式匹配。

…但正如@Roko所说，当用户可能还在删除线条时，编辑和删除线条并不好。您可以在blur事件中运行此代码，或者使用TextArea的pattern属性在格式不好时拒绝提交

let tels = /d{10}/g
let matches = ta.value.match(tels);
ta.value = "";
for (let i = 0; i < matches.length; i++) {
ta.value+=matches[i] + "n";
console.log(matches[i]);
}

<textarea id="ta">
9848012345
9949123450
9949 123456
99491234
99491234561
[phone]
9848098765
</textarea>

Answer 2

按OP要求。您可以使用regex一次性获得一个有效的电话号码数组，而不需要字符串操作。

• 修改为onpaste
• 进一步修改为将粘贴的文本附加到现有的输入

事项:

1. regex每行一个数字，没有前导空格，允许尾随空格，并使用regex全局和多行标志进行操作。
2. 对于"成千上万的数字"不是最好的主意，但只要不超过系统限制，应该可以工作
3. 如果你要输入你的类型，你可能最好实现一个输入文本字段与强有效性检查，然后追加有效的数字到<textarea>(假设你正在寻找复制的数字列表之后)。

function filterPhoneNumbers(e) {
e.stopPropagation();
e.preventDefault();
let t = `${e.target.value}n`;
t += e.clipboardData.getData('Text');

let ValidPhoneNumbers = t.match(/^d{10}s*?$/gm);
e.target.value = ValidPhoneNumbers.join('n');
}

textarea {
width: 300px
}

<table>
<tr>
<td>
<pre>Copy This:

9848012345 
9949123450 
9949 123456 
99491234 
99491234561 
[phone] 
9848098765</pre>
</td>
<td>
<textarea id="numbers" rows=10 
placeholder="Paste Here"
onpaste="filterPhoneNumbers(event)"></textarea>
</td>
</tr>
</table>