0

独自のフォーム検証を作成するのはいいことだと思いました。電話番号をテストするまでのコードは問題ありません。数字のみを許可し、桁数を検出するためにJavaScriptを使用しています。数字が 3 か 7 の場合は、ダッシュを追加します。最初のダッシュを入力した後、ダッシュが文字列に含まれ、2 番目のダッシュが文字列の位置 8 になるため、7 に設定されています。これで問題なく動作しますが、ユーザーが間違った数字を入力してダッシュが表示された場合、ユーザーがそれをバックスペースしようとすると、文字列の長さが 3 または 7 に戻っていることがわかり、自動的にダッシュがそこに戻されます。ユーザーが一度に 1 スペースずつ戻ってエラーを修正できるようにします。バックスペースを押したままにすると、削除されます。分割と部分文字列を使用してみましたが、どのように機能するかがわからないため、正しく機能します。

HTML

<form>
  <input type = 'text' name = 'txtPhone' id = 'txtPhone' onkeypress = 'return numbersOnly(event)' onkeyup = 'validateForm(this.id)'/>
</form>

JavaScript

function numbersOnly(e){
  var unicode = (e.charCode) ? e.charCode : e.keyCode;
  if (unicode == 8
   || unicode == 9
   || (unicode >= 48 && unicode <= 57)
  )}
    return true;
  }else{
    return false;
  }
}

function validateForm(id){
  var id = document.getElementById(id);
  var unicode = (event.charCode) ? event.charCode : event.keyCode;
  // first add slashes after third and sixth digit
  if (id.value.length == 3
   || id.value.length == 7
  ){
    var newValue = id.value += "-";
    id.value = newValue;
  }
  // if backspace is pressed, remove the dash
  if (unicode == 8){
    var value = document.getElementById(id).value;
    value = value.substring(0, value.length - 1);
  }
}
4

1 に答える 1

0

関数では、最初onchangeに末尾のダッシュを確認してください。フィールドが変更されたばかりで、末尾にダッシュがある場合、ユーザーは次の文字を削除しただけなので、それらのダッシュを削除する必要があります。ダッシュを削除したら、何もせずに戻ります。ユーザーがフィールドを再度変更するまでイベントは再度発生しないため、コードは別のダッシュを挿入しません。これは、フィールドに 6 文字または 8 文字が入力されるまで再度呼び出されないためです。onchange

もちろん、それは単純化しすぎです。ユーザーが文字列の途中を編集して、うまくいかない場合があります。a）ライブラリを使用するか、b）フィールド長をチェックするだけでなく、いくつかの正規表現を使用することをお勧めします。

于 2013-03-18T04:43:49.713 に答える