JavaScript フォーム検証の実装コード_javascript スキル-jsチュートリアル-php.cn

JavaScript フォーム検証の実装コード_javascript スキル

Y2J

リリース： 2017-05-23 13:22:41

オリジナル

1682 人が閲覧しました

この記事では主に JavaScript フォーム検証の実装コードを詳しく紹介します。興味のある方は参考にしてください。

データがサーバーに送信される前に HTML フォーム内のこれらのフィールドを検証するために JavaScript を使用できます。入力データの検証

JavaScript フォームの検証

JavaScript を使用すると、データがサーバーに送信される前に、HTML フォーム内のこれらの入力データを検証できます。
JavaScript によって検証される一般的なフォームデータは次のとおりです:
ユーザーはフォームの必須フィールドに入力しましたか?
ユーザーが入力したメールアドレスは合法ですか?
ユーザーは有効な日付を入力しましたか?
ユーザーは数値フィールドにテキストを入力しましたか?

必須（または必須）項目

以下の関数は、ユーザーがフォームに必須（または必須）項目を入力したかどうかを確認するために使用されます。必須フィールドまたは必須フィールドが空の場合、警告ボックスがポップアップ表示され、関数の戻り値はfalseになります。それ以外の場合、関数の戻り値はtrueになります(データに問題がないことを意味します)。 ):

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
 {alert(alerttxt);return false}
else {return true}
}
}

ログイン後にコピー

以下は HTML フォームのコードです:

<html>
<head>
<script type="text/javascript">

function validate_required(field,alerttxt)
{
with (field)
 {
 if (value==null||value=="")
  {alert(alerttxt);return false}
 else {return true}
 }
}

function validate_form(thisform)
{
with (thisform)
 {
 if (validate_required(email,"Email must be filled out!")==false)
  {email.focus();return false}
 }
}
</script>
</head>

<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

ログイン後にコピー

電子メールの検証

次の関数は、入力されたデータが電子メールアドレスの基本構文に準拠しているかどうかをチェックします。
これは、入力されたデータには @ 記号とピリオド (.) が含まれている必要があることを意味します。同時に、@ を電子メールアドレスの最初の文字にすることはできず、@ の後に少なくとも 1 つのピリオドが必要です:

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
 {alert(alerttxt);return false}
else {return true}
}
}

ログイン後にコピー

以下は、HTML フォームを含む完全なコードです: