[TIL]フォーム検証(検証)
server-side validation:データが別のコンピュータ(通常はサーバ)に転送されて検証されると発生します.
ex)ログインページ(id、pwの入力を受け付け、マッチング確認サーバにデータを送信)
クライアント検証:データがサーバに転送される前に発生します.
異なるブラウザ間で共有することで、時間とセキュリティを節約できます.
1. Requiring an Input
<form action="/example.html" method="POST">
<label for="allergies">Do you have any dietary restrictions?</label>
<br>
<input id="allergies" name="allergies" type="text" required>
<br>
<input type="submit" value="Submit">
</form>2. Set a Minimum and Maximum
<form action="/example.html" method="POST">
<label for="guests">Enter # of guests:</label>
<input id="guests" name="guests" type="number" min="1" max="4">
<input type="submit" value="Submit">
</form>3. Checking Text length
文字の長さ
minlength="", maxlength=""
<form action="/example.html" method="POST">
<label for="summary">Summarize your feelings in less than 250 characters</label>
<input id="summary" name="summary" type="text" minlength="5" maxlength="250" required>
<input type="submit" value="Submit">
</form>4. Matching a Pattern
例)有効な新しいクレジットカード番号(14～16桁)
0～9の14～16桁の数字を入力します.
Credit Card Number (no spaces):
<form action="/example.html" method="POST">
<label for="payment">Credit Card Number (no spaces):</label>
<br>
<input id="payment" name="payment" type="text" required pattern="[0-9]{14,16}">
<input type="submit" value="Submit">
</form>ユーザー名をアルファベットと数値に制限
<input id="username" name="username" type="text" required minlength="3" maxlength="15" pattern="[a-zA-Z0-9]+">
Reference
この問題について([TIL]フォーム検証(検証)), 我々は、より多くの情報をここで見つけました https://velog.io/@sebely/TIL-Form-validation-유효성-검사テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol