JavaScript实现表单文本域手机号的自动筛选与计数

<form class="form" method="post" enctype="multipart/form-data">
    <div class="form-group row">
        <label for="mobileno" class="col-lg-2 col-form-label">手机号码</label>                         
        <div class="col-lg-10">
            <textarea require type="text" class="form-control required" required 
            cols="10" rows="7" id="mobileno" name="mobileno" placeholder="每行输入一个手机号码"></textarea>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-lg-2 control-label" for="numbercount">号码总数</label>
        <div class="col-lg-10">
            <input type="text" class="form-control" readonly id="numbercount" required name="numbercount" value="0">
        </div>
    </div>

    <div class="form-group row">
        <div class="col-lg-12 text-center">
            <button id="btn" type="submit" name="submit" class="btn btn-success btn-lg waves-effect waves-light m-r-10">提交</button>
        </div>
    </div>
</form> 

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const mobileNumbersTextarea = document.querySelector('#mobileno');
        const numberCountInput = document.querySelector('#numbercount');

        /**
         * 处理文本域内容，筛选10位纯数字号码并更新计数
         */
        function processMobileNumbers() {
            let rawInput = mobileNumbersTextarea.value;
            // 按行分割，并过滤掉空行
            let lines = rawInput.split('\n').map(line => line.trim()).filter(line => line !== '');

            let validNumbers = [];
            const tenDigitNumberRegex = /^\d{10}$/; // 匹配精确的10位数字

            lines.forEach(num => {
                if (tenDigitNumberRegex.test(num)) {
                    validNumbers.push(num);
                }
            });

            // 移除重复的有效号码（可选，但推荐）
            const uniqueValidNumbers = [...new Set(validNumbers)];

            // 更新文本域内容，只保留有效号码，每行一个
            mobileNumbersTextarea.value = uniqueValidNumbers.join('\n');
            // 更新号码计数
            numberCountInput.value = uniqueValidNumbers.length;
        }

        // 监听 input 事件，实现实时处理
        // input 事件在用户输入、删除、粘贴等操作时都会触发
        mobileNumbersTextarea.addEventListener('input', processMobileNumbers);

        // 页面加载时执行一次，以处理初始内容（如果文本域有预设值）
        processMobileNumbers();
    });
</script>