JavaScriptフォームの検証

2561 ワード

JavaScript html 機能 input action email

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>

Eメールの検証
以下の関数は、入力されたデータが電子メールアドレスの基本的な文法に合っているかどうかを確認します.
入力したデータには@符号と点(.)が含まれていなければならないという意味です.また、@はメールアドレスの先頭文字ではなく、@以降は少なくとも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フォームと一緒の完全なコードです.

<html>
<head>
<script type="text/javascript">
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}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==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>

JavaScriptのプロトタイプとconstructor、_uproto_、prototypeの関係