Javascript 验证用户在尝试使用laravel中的nexmo拨打电话号码时的有效性

我的客户服务应用程序使用应用程序内浏览器调用，使用nexmo和laravel作为框架。我有一些用户，每个用户都在表中列出了他们的电话号码，每行都有联系人操作按钮来呼叫。电话号码的目标放在如下按钮中：

<a href="#" class="btn btn-sm btn-info call-button" data-toggle="modal" data-number="6281299054899">Contact</a>

但用户可以检查元素并编辑这些按钮，然后输入他们想要的另一个电话号码。我如何防止这种欺骗，并在“你没有授权拨打这个电话号码”的例子中提醒用户。当他们这样做的时候

单击.call按钮时，此操作将显示我的处理程序：

dataTableAdminLeader.on('click', '.call-button', function(){
    let id                  = $(this).data('id');
    let master_number_id    = $(this).data('master_numbers_id');
    let target_number       = $(this).data('number');
    const trashButton       = document.querySelector('.btn-trash');
    const updateButton      = document.querySelector(".btn-update");

    trashButton.setAttribute('disabled', 'disabled');
    updateButton.setAttribute('disabled', 'disabled');

    $('#phone-call-modal').modal('show');
    // input reset
    document.querySelector('#target-phone').value = target_number;
    document.querySelector('#id-edit').value = id;
    document.querySelector('#master-numbers-id-edit').value = master_number_id;
    document.querySelector('#member-id').value = $(this).data('id-member');
    document.querySelector('#member-name').value = $(this).data('name');

    trashButton.removeAttribute('disabled');
    updateButton.removeAttribute('disabled');

    // all constant needed for call
    const USER_JWT          = "{{ $jwt_token }}";
    const phoneNumberInput  = document.querySelector("#cs-phone");
    const statusElement     = document.querySelector("#status-call");
    // button object selector
    const callButton        = document.querySelector(".btn-call");
    callButton.setAttribute('disabled', 'disabled');
    const hangupButton      = document.querySelector(".btn-hangup");
    const closeButton       = document.querySelector('.btn-close');

    closeButton.style.removeProperty('display');
    const statusButton      = document.querySelector('.btn-status');
    // input object selector
    let campaign_result     = document.querySelector('#campaignresult');
    let note_contacted      = document.querySelector('#note_contacted');
    let note_container      = document.querySelector('.note_container');
    let nameContainer       = document.querySelector('.name-container');
    let campaignContainer   = document.querySelector('.campaign-container');
    let waContainer         = document.querySelector('.wa-container');
    let inputCallStatus     = document.querySelector('#call-status');
    // call status check
    let callStatusCompleted = false;
    let callStatusAnswered  = false;
    // reset property
    campaign_result.value   = "";
    note_container.style    = 'display: none';
    nameContainer.style     = 'display: none';

    // sound object
    var sndAnswered = new Audio("{{ asset('storage/sounds/answered.wav') }}");

    // listening to event
    campaign_result.addEventListener('change', function(){
      if(campaign_result.value != ''){
        note_container.style.removeProperty('display');
        note_contacted.setAttribute('required', 'required');
      }else{
        note_container.style = 'display: none';
        note_contacted.removeAttribute('required');
      }
    });
    // nexmo status reset
    statusElement.innerText = '';
    inputCallStatus.value = '';
    // nexmo call button reset
    callButton.style.display = "inline";
    hangupButton.style.display = "none";
    // timeouts set
    setTimeout(() => {
      callButton.removeAttribute('disabled');
    }, 5000);
    // nexmo object start
    new NexmoClient({ debug: true }).login(USER_JWT).then(app => {
      callButton.addEventListener("click", event => {
        event.preventDefault();
        let number = String(target_number);
        console.log(number);
        if (number !== ""){
          app.callServer(number).catch(function(error){
            console.log('debug: ',error);
          });
        } else {
          statusElement.innerText = 'Please enter your phone number.';
        }
      });
      app.on("member:call", (member, call) => {
        // object selector reset
        callButton.style.display = 'none';
        closeButton.style.display = 'none';
        hangupButton.style.removeProperty('display');
        statusButton.style.removeProperty('display');
        $('#wa-valid').removeAttr('checked');
        // event when hangup button clicked
        hangupButton.addEventListener("click", () => {
          call.hangUp();
        });
      });
      app.on("call:status:changed",(call) => {
        console.log('Periodik : ', call.status);
        // animation call
        let statusAnimation = `<p class="saving">Call status: ${call.status}<span>.</span><span>.</span><span>.</span></p>`;
        // assign call animation to nexmo status display
        statusElement.innerHTML = statusAnimation;
        // filter nexmo status condition
        switch(call.status) {
          case call.CALL_STATUS.STARTED:
            console.log('Case call status: ', call.status);
            break;
          case call.CALL_STATUS.RINGING:
            console.log('Case call status: ', call.status);
            break;
          case call.CALL_STATUS.FAILED:
            inputCallStatus.value = call.status;
            callStatusAnswered = false;
            callButton.style.display = 'none';
            hangupButton.style.display = 'none';
            statusButton.style.removeProperty('display');
            updateButton.style.removeProperty('display');
            trashButton.style.removeProperty('display');
            waContainer.style.removeProperty('display');
            closeButton.style.removeProperty('dispaly');
            nameContainer.style.removeProperty('display');
            console.log('Case call status: ', call.status);
            break;
          case call.CALL_STATUS.CANCELLED:
            inputCallStatus.value = call.status;
            callStatusAnswered = false;
            callButton.style.removeProperty('display');
            hangupButton.style.display = 'none';
            statusButton.style.display = 'none';
            nameContainer.style.removeProperty('display');
            updateButton.style.removeProperty('display');
            trashButton.style.removeProperty('display');
            waContainer.style.removeProperty('display');
            closeButton.style.removeProperty('dispaly');
            console.log('Case call status: ', call.status);
            break;
          case call.CALL_STATUS.COMPLETED:
            callStatusCompleted = true;
            callButton.style.display = 'none';
            hangupButton.style.display = 'none';
            updateButton.style.removeProperty('display');
            closeButton.style.display = 'none';
            statusButton.style.display = 'none';
            campaign_result.setAttribute('required', 'required');
            nameContainer.style.removeProperty('display');
            campaignContainer.style.removeProperty('display');
            dataTableAdminLeader.ajax.reload();
            console.log('Case call status: ', call.status);
            break;
          case call.CALL_STATUS.ANSWERED:
            // play sound
            sndAnswered.play();
            inputCallStatus.value = call.status;
            callStatusAnswered = true;
            callButton.style.display = 'none';
            hangupButton.style.removeProperty('display');
            nameContainer.style.removeProperty('display');
            closeButton.style.display = 'none';
            statusButton.style.display = 'none';
            console.log('Case call status: ', call.status);
            break;
          default:
            // BUSY
            // REJECTED
            // TIMEOUT
            // UNANSWERED
            inputCallStatus.value = call.status;
            callStatusAnswered = false;
            callButton.style.display = 'none';
            hangupButton.style.display = 'none';
            updateButton.style.removeProperty('display');
            trashButton.style.removeProperty('display');
            statusButton.style.display = 'none';
            nameContainer.style.removeProperty('display');
            waContainer.style.removeProperty('display');
            closeButton.style.removeProperty('dispaly');
            console.log('Case call status: ', call.status);
            console.log('Case call status default: ', call.status);
            break;
        }
      });
    }).catch(function(){
      alert('Network Problem, refresh page and try again later. Please contact dev team if this problem not fix in few minutes.');
      console.error;
      $('#phone-call-modal').modal('hide');
    });
  });

dataTableAdminLeader.on（'单击'，'调用按钮'，函数（））{
设id=$（this.data（'id'）；
让master_number_id=$（this）.data（'master_number_id'）；
让target_number=$（this.data（'number'）；
const trashButton=document.querySelector（'.btn trash'）；
const updateButton=document.querySelector（“.btn update”）；
setAttribute（'disabled'，'disabled'）；
setAttribute（'disabled'，'disabled'）；
$（“#电话通话模式”）.model（'show'）；
//输入复位
document.querySelector（“#目标电话”）.value=目标电话号码；
document.querySelector（'#id edit'）。value=id；
document.querySelector（“#主控编号id edit”）.value=主控编号id；
document.querySelector（“#成员id”）.value=$（this.data（'id-member'）；
document.querySelector（“#成员名称”）.value=$（this.data（'name'）；
垃圾按钮。移除属性（“禁用”）；
updateButton.removeAttribute（'disabled'）；
//调用所需的所有常量
const USER_JWT=“{{$JWT_token}}”；
const phoneNumberInput=document.querySelector（“#cs phone”）；
const statusElement=document.querySelector（“状态调用”）；
//按钮对象选择器
const callButton=document.querySelector（“.btn调用”）；
setAttribute（'disabled'，'disabled'）；
常量挂起按钮=document.querySelector（“.btn挂起”）；
const closeButton=document.querySelector（'.btn close'）；
closeButton.style.removeProperty（'display'）；
const statusButton=document.querySelector（“.btn status”）；
//输入对象选择器
让campaign_result=document.querySelector（“#campaign result”）；
let note_contacted=document.querySelector（'note_contacted'）；
让note_container=document.querySelector（'.note_container'）；
让nameContainer=document.querySelector（'.name container'）；
让活动容器=document.querySelector（“.campaign container”）；
让waContainer=document.querySelector（“.wa container”）；
让inputCallStatus=document.querySelector（“#调用状态”）；
//呼叫状态检查
让callStatusCompleted=false；
让CallStatusResponsed=false；
//重置属性
活动_result.value=“”；
注意_container.style='display:none'；
nameContainer.style='display:none'；
//声音物体
var sndAnswered=新音频（{asset（'storage/sounds/answered.wav'）}）；
//倾听事件
活动结果。addEventListener（'change'，function（）{
如果（活动结果值！=''）{
注意_container.style.removeProperty（'display'）；
注.setAttribute（'required'，'required'）；
}否则{
注意_container.style='display:none'；
注：删除属性（“必需”）；
}
});
//nexmo状态重置
statusElement.innerText=''；
inputCallStatus.value=''；
//下一个呼叫按钮重置
callButton.style.display=“inline”；
hangupButton.style.display=“无”；
//超时设置
设置超时（（）=>{
callButton.removeAttribute（“已禁用”）；
}, 5000);
//下一个对象启动
新建NexmoClient（{debug:true}）。登录（用户_JWT）。然后（应用=>{
callButton.addEventListener（“单击”，事件=>{
event.preventDefault（）；
让编号=字符串（目标编号）；
控制台日志（编号）；
如果（数字！==“”）{
app.callServer（number）.catch（函数）（错误）{
log（'debug:'，错误）；
});
}否则{
statusElement.innerText='请输入您的电话号码'；
}
});
app.on（“会员：呼叫”，（会员，呼叫）=>{
//对象选择器重置
callButton.style.display='none'；
closeButton.style.display='none'；
hangupButton.style.removeProperty（'display'）；
statusButton.style.removeProperty（“显示”）；
$（'wa valid'）.removeAttr（'checked'）；
//单击挂起按钮时发生的事件
hangupButton.addEventListener（“单击”，（）=>{
call.hangUp（）；
});
});
应用程序打开（“呼叫：状态：已更改”，（呼叫）=>{
console.log（'Periodik:'，call.status）；
//动画调用
让statusAnimation=`
调用状态：${Call.status}…
`；
//将调用动画指定给nexmo状态显示
statusElement.innerHTML=状态动画；
//过滤器nexmo状态条件
开关（呼叫状态）{
案例呼叫。呼叫状态。已启动：
console.log（'Case call status:'，call.status）；
打破
案例呼叫。呼叫状态。振铃：
console.log（'Case call status:'，call.status）；
打破
案例调用。调用状态。失败：
inputCallStatus.value=call.status；
CallStatusResponsed=false；
callButton.style.display='none'；
hangupButton.style.display='none'；
statusButton.style.removeProperty（“显示”）；
updateButton.style.removeProperty（'display'）；
trashButton.style.removeProperty（'display'）；
waContainer.style.removeProperty（'display'）；
closeButton.style.removeProperty（'dispaly'）；
nameContainer.style.removeProperty（'display'）；