Validation

入力値の正当性確認
Input value validation

フロントエンドとバックエンドで必要
Required in frontend and backend

frontend

[HTML5] input type


date 日付入力[Date Entry]
email メールアドレス入力[Enter your email address]
tel 電話番号入力[Enter phone number]
number 数字入力[numeric entry]
[HTML5] バリデーション属性[validation attribute]


required 必須入力[require entry]
readonly 操作を無効[Disable operation]
pattern 入力パターンの指定[Designation of input patterns]
・半角英数字：pattern=”^[0-9A-Za-z]+$”
・数字＋ハイフン(-)：pattern=”\d{3}-?\d{4}”
Half-width alphanumeric characters: pattern=”^[0-9A-Za-z]+$”
Numbers + hyphen (-): pattern=”\d{3}-? \d{4}”
maxlength 最長の長さの指定[Specify the longest length]
minlength 最短の長さの指定[Specify the shortest length]
javascriptの場合[For javascript]

未入力チェック[Incomplete check]

<input type="text" id="textStr"> 
<button id="send">send</button>

 <script>
   $(document).on("click","#send", function () {
     let value= $('#textStr').val();
     if (value== "") {
       //Error Handling
       alert('Required.');
     }else{
        alert('success');
     }
   });

 </script>

半角英数字の入力制御[Half-width alphanumeric input control]

<input type="text" class="input_number_only">
<script>
$(document).on('blur', '.input_number_only',function(){
    let value = $(this).val();
    if( value.match( /[^A-Za-z0-9s.-]+/ ) ) {
        alert("半角英文字で入力してください");
        return false;
    }
});
</script>

数字のみの入力制御[Numeric-only input control]

<input type="text" id="num-only"> 
<script>
    $(document).on("blur","#num-only", function () {
        let value = $(this).val();
        if (!Number.isFinite(Number(value))) {
            alert('not int');
        }
    });
</script>

backend

未入力チェック[Incomplete check]

if(empty($_POST['check_data'])){
    echo "Not entered.";
}

半角英数字のみの入力制御[Input control for single-byte alphanumeric characters only]

    // OK
    $str = "234egervr345";
    if (preg_match("/^[a-zA-Z0-9]+$/", $str)) {
        echo "All of them are half-width alphanumeric characters.";
    } else {
        echo "Not all single-byte alphanumeric characters";
    }

    //No
    $str = "G３４５ｒｔｆbrtＧＨＫ";
    if (preg_match("/^[a-zA-Z0-9]+$/", $str)) {
        echo "All of them are half-width alphanumeric characters.";
    } else {
        echo "Not all single-byte alphanumeric characters";
    }

数字のみの入力制御[Numeric-only input control]

//pattern1
if(is_int(12345)){
  echo "int";
}else{
  echo "not int";
}

//pattern2
if (preg_match("/^[0-9]+$/","12345")) {
  echo 'int';
} else {
  echo "not int";
}