JS - 防止追加多次添加

Question

我有一個帶有移動字段的表單。 在提交按鈕上，我放置了一個事件來向移動字段添加一個值（它會自動添加國家/地區代碼，這是一個固定值“11”），因此當用戶單擊“提交”時，JS 會添加“11”值到手機，所以這個字段會像這樣“1155555555”（用戶剛剛輸入“55555555”）進入數據庫。

好的，問題是如果用戶留下一個空字段（所有字段都是必需的），然后點擊提交，表單將不會被發送，但無論如何它都會向移動字段添加值“11”，並且當用戶填寫空白字段並第二次單擊提交時，它會再次添加值“11”，因此移動設備會顯示“ 1111 55555555”，依此類推。

基本上，我需要的是防止此功能多次發生。 它必須只發生一次。 我如何使用 JS 實現這一目標？

HTML：

   <input id="mobile" name="MOBILE" type="tel"><input type="number" value="11" id="front" class="hide">
 <button type="submit" onclick="append11()">SUBMIT</button>

JS：

    function append11(){
    var mobilenumber = document.getElementById("mobile");
  var front = document.getElementById("front").value;
  mobilenumber.value=front+mobilenumber.value;
  alert(mobilevalue.value);
}

Answer 1

我認為您應該注意對原始問題的評論回復。 你的方法有一些風險。

但我假設您是一個初學者，只是想學習如何做您所要求的事情，因此下面的 javascript 應用了一些您可能會考慮的原則。

 function isNumberValid9(num) { console.log(num, num.length); //check string length and pattern //this could be combined into a single regex, eg: mobileValue.match("^[0-9]{9}$") var isValid9 = num.length === 9 && num.match("^[0-9]+$"); console.log(isValid9); //display the value about to be returned return isValid9; } /* Conditionally prepend "11" */ function maybeAppend11() { var mobilenumber = document.getElementById("mobile"); var mobileValue = mobilenumber.value; //only prepend "11" if the number matches your expected pattern and length if (isNumberValid9(mobileValue)) { var front = document.getElementById("front").value; mobilenumber.value = front + mobileValue; } alert(mobilenumber.value); }

 <input id="mobile" name="MOBILE" type="tel" value="555555555"><input type="number" value="11" id="front" class="hide"> <button type="submit" onclick="maybeAppend11()">SUBMIT</button>

Answer 2

為什么不在函數中附加 11？

喜歡：

function append11(){
  var mobilenumber = document.getElementById("mobile");
  mobilenumber.value="11"+mobilenumber.value;
  alert(mobilevalue.value);
}