JavaScript フォームの検証 - フォームの送信_JavaScript スキル

推奨読書: JavaScript フォーム検証の長さ

JavaScript フォーム検証 - 正規表現の最初の紹介

JavaScript フォームの検証 - 正規表現を明らかにする

JavaScript を使用すると、HTML フォーム内のこれらの入力データをサーバーに送信する前に検証できます。

不正なデータがサーバーに到達しないようにする: フォーム送信時の検証

フォームフィールドオブジェクトにはフォーム属性があり、配列を使用してフォーム全体のフィールドを表します

単純な情報テキスト ボックス、郵便番号ボックス、および送信ボタンだけがあると仮定します

<form>
<input id="message" name="message" type="text" size="12" onBlur="validate_Length(1,32,this,document.getElementById('message_help'));" />
<message_help" class="help"></span>
<input id="ZipCode" name="phone" type="text" size="5" onBlur="validate_ZipCode(this,document.getElementById('ZipCode_help'));" />
<span id="ZipCode_help" class="help"></span>
<input type="button" value="Order Banner" onClick="placeOrder(this.form);"/>
</form>
<script language="javascript" type="text/javascript">
//文本长度验证
function validate_Length(minLegth,maxlength,inputFiled,helpText)
{
if(inputFiled.value.length<minLegth||inputFiled.value.length>maxlength)
{
if(helpText!=null)
{
helpText.innerHTML="请输入长度为"+minLenght+"到"+maxLength+"的文本";
return false;
}
}
else if(helpText!=null)
{
helpText.innerHTML=""
return true;
}
}
//邮政编码验证
function validate_ZipCode(inputFiled,helpText)
{
if(inputFiled.value.length!=5)
{
if(helpText!=null)
helpText.innerHTML="邮政编码长度必须为5位";
return false;
}
else if(isNaN(inputFiled.value))
{
if(helpText!=null)
helpText.innerHTML="邮政编码必须为数字";
return false;
}
else if(helpText!=null)
{
helpText.innerHTML=""
return true;
}
}
function placeOrder(form)
{
if(validateNonEmpty(1,32,form["phone"],form["phone_help"])&&validate_ZipCode(form["ZipCode"],form["ZipCode_help"]))
{
form.submit();
}
else{
alert("您填写的表单数据至少有一项不合法");
}
}
</script>

概要: 対応する検証関数を呼び出して戻り値を取得するだけで、フォームの送信時に最終的なデータのフィルタリングを完了できます

実際のアプリケーションでは、データの長さ、空でない文字、不正な文字、形式、サイズなどを検証する必要があることがよくありますが、ここではそれらを 1 つずつ紹介しませんが、理解することに重点を置きます。

それでは、ここで編集者が Javascript フォームの検証とフォーム送信に関する関連知識を紹介しますので、お役に立てれば幸いです。