この記事では、フォーム検証のためのJSの方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
1.従来のフォーム検証コード
次のようにコードをコピーします。
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title>フォーム検証</title>
<script type = "text/javascript">
function $（id）{
document.getElementByID（ID）を返します。
}
function check（）{
var email = $（ "email"）。value;
var password = $（ "password"）。value;
var Repassword = $（ "Repassword"）。value;
var name = $（ "name"）。value;
if（email == ""）{
アラート（「電子メール値は空にすることはできません」）;
$（ "email"）。focus（）;
falseを返します。
}
if（email.indexof（ "@"）== -1 || email.indexof（ "。"）== -1）{
alert（ "メールボックス形式は正しくありません。 @ and。"）;
$（ "email"）。focus（）;
falseを返します。
}
if（password == ""）{
アラート（「パスワードは空にすることはできません」）;
$（ "password"）。focus（）;
falseを返します。
}
if（password.length <6）{
Alert（ "パスワードの長さは6"以上でなければなりません "）;
$（ "password"）。focus（）;
falseを返します。
}
if（repassword！= password）{
アラート（「2回入力されたパスワードは一貫性がありません」）;
$（ "Repassword"）。focus（）;
falseを返します。
}
if（name == ""）{
アラート（「名前は空にすることはできません」）;
$（ "name"）。focus（）;
falseを返します。
}
for（var i = 0; i <name.length; i ++）{
var j = name.substring（i、i+1）;
if（isnan（j）== false）{
alert（ '名前に数字を含めることはできません'）;
$（ "name"）。focus（）;
falseを返します。
}
}
}
</script>
</head>
<body>
<form name = "login_form" method = "post" onsubmit = "return check（）">
<div>
電子メール：<入力タイプ= "テキスト" name = "email" id = "email"/>
</div>
<div>
パスワード：<入力タイプ= "パスワード" name = "password" id = "password" />
</div>
<div>
パスワードに再入力します：<入力タイプ= "パスワード" name = "repassword" id = "repassword" />
</div>
<div>
名前：<入力タイプ= "テキスト" name = "name" id = "name" />
</div>
<div>
<入力型= "submit" value = "Register" />
</div>
</form>
</body>
</html>
2。入力ボックスの背後にある迅速な情報を使用したフォームの検証
次のようにコードをコピーします。
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title>フォーム検証</title>
<script type = "text/javascript">
function $（id）{
document.getElementByID（ID）を返します。
}
function check（）{
var email = $（ "email"）。value;
var password = $（ "password"）。value;
var Repassword = $（ "Repassword"）。value;
var name = $（ "name"）。value;
$（ "emailinfo"）。innerhtml = "";
$（ "passwordinfo"）。innerhtml = "";
$（ "Repasswordinfo"）。innerhtml = "";
$（ "nameinfo"）。innerhtml = "";
if（email == ""）{
$（ "emailinfo"）。innerhtml = "電子メール値は空になりません";
$（ "email"）。focus（）;
falseを返します。
}
if（email.indexof（ "@"）== -1 || email.indexof（ "。"）== -1）{
$（ "EmailInfo"）。innerhtml = "メールボックス形式は間違っています。 @ and。"を含める必要があります。
$（ "email"）。focus（）;
falseを返します。
}
if（password == ""）{
$（ "passidentInfo"）。innerhtml = "パスワードは空にすることはできません";
$（ "password"）。focus（）;
falseを返します。
}
if（password.length <6）{
$（ "passidentInfo"）。innerhtml = "パスワードの長さは6"以上でなければなりません。
$（ "password"）。focus（）;
falseを返します。
}
if（repassword！= password）{
$（ "Repasswordinfo"）。innerhtml = "2回入力されたパスワードは一貫性がありません";
$（ "Repassword"）。focus（）;
falseを返します。
}
if（name == ""）{
$（ "nameinfo"）。innerhtml = "名前は空にすることはできません";
$（ "name"）。focus（）;
falseを返します。
}
for（var i = 0; i <name.length; i ++）{
var j = name.substring（i、i+1）;
if（isnan（j）== false）{
$（ "nameinfo"）。innerhtml = '名前に数字を含めることはできません';
$（ "name"）。focus（）;
falseを返します。
}
}
}
</script>
</head>
<body>
<form name = "login_form" method = "post" onsubmit = "return check（）">
<div>
電子メール：<入力タイプ= "テキスト" name = "email" id = "email"/> <span id = "emailinfo"> </span>
</div>
<div>
パスワード：<入力タイプ= "パスワード" name = "password" id = "password" /> <span id = "passwordinfo"> < /span>
</div>
<div>
パスワードに再入力します：<入力タイプ= "パスワード" name = "repassword" id = "repassword" /> <span id = "repasswordinfo"> < /span>
</div>
<div>
名前：<入力タイプ= "テキスト" name = "name" id = "name" /> <span id = "nameinfo"> < /span>
</div>
<div>
<入力型= "submit" value = "Register" />
</div>
</form>
</body>
</html>
レンダリングは次のとおりです。
3.入力ボックスがフォーカスを失ったときにチェック関数をトリガーします
次のようにコードをコピーします。
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title>フォーム検証</title>
<script type = "text/javascript">
function $（id）{
document.getElementByID（ID）を返します。
}
function check（）{
var email = $（ "email"）。value;
var password = $（ "password"）。value;
var Repassword = $（ "Repassword"）。value;
var name = $（ "name"）。value;
$（ "emailinfo"）。innerhtml = "";
$（ "passwordinfo"）。innerhtml = "";
$（ "Repasswordinfo"）。innerhtml = "";
$（ "nameinfo"）。innerhtml = "";
if（email == ""）{
$（ "emailinfo"）。innerhtml = "電子メール値は空になりません";
falseを返します。
}
if（email.indexof（ "@"）== -1 || email.indexof（ "。"）== -1）{
$（ "EmailInfo"）。innerhtml = "メールボックス形式は間違っています。 @ and。"を含める必要があります。
falseを返します。
}
if（password == ""）{
$（ "passidentInfo"）。innerhtml = "パスワードは空にすることはできません";
falseを返します。
}
if（password.length <6）{
$（ "passidentInfo"）。innerhtml = "パスワードの長さは6"以上でなければなりません。
falseを返します。
}
if（repassword！= password）{
$（ "Repasswordinfo"）。innerhtml = "2回入力されたパスワードは一貫性がありません";
falseを返します。
}
if（name == ""）{
$（ "nameinfo"）。innerhtml = "名前は空にすることはできません";
falseを返します。
}
for（var i = 0; i <name.length; i ++）{
var j = name.substring（i、i+1）;
if（isnan（j）== false）{
$（ "nameinfo"）。innerhtml = '名前に数字を含めることはできません';
falseを返します。
}
}
}
function checkemail（）{//電子メールを確認してください
$（ 'emailinfo'）。innerhtml = "";
var email = $（ 'email'）。value;
if（email == ""）{
$（ 'emailinfo'）。innerhtml = "電子メール値は空になりません";
falseを返します。
}
if（email.indexof（ '@'）== -1 || email.indexof（ '。'）== -1）{
$（ 'emailinfo'）。innerhtml = "電子メールは @ and。"を含める必要があります。
falseを返します。
}
}
function checkpassword（）{//パスワードを確認してください
$（ 'passwordinfo'）。innerhtml = "";
var password = $（ 'password'）。値;
if（password == ""）{
$（ "passidentInfo"）。innerhtml = "パスワードは空にすることはできません";
falseを返します。
}
if（password.length <6）{
$（ "passidentInfo"）。innerhtml = "パスワードの長さは6"以上でなければなりません。
falseを返します。
}
}
function checkrepassword（）{//再入力されたパスワードを確認します
$（ 'Repassword'）。innerhtml = "";
var Repassword = $（ 'Repassword'）。value;
if（repassword！= password）{
$（ "Repasswordinfo"）。innerhtml = "2回入力されたパスワードは一貫性がありません";
falseを返します。
}
}
function checkname（）{//名前を確認してください
$（ 'nameinfo'）。innerhtml = "";
var name = $（ 'name'）。value;
if（name == ""）{
$（ "nameinfo"）。innerhtml = "名前は空にすることはできません";
falseを返します。
}
for（var i = 0; i <name.length; i ++）{
var j = name.substring（i、i+1）;
if（isnan（j）== false）{
$（ "nameinfo"）。innerhtml = '名前に数字を含めることはできません';
falseを返します。
}
}
}
</script>
</head>
<body>
<form name = "login_form" method = "post" onsubmit = "return check（）">
<div>
電子メール：<入力タイプ= "text" name = "email" id = "email" onblur = "checkemail（）;"/> <span id = "emailinfo"> </span>
</div>
<div>
パスワード：<入力タイプ= "パスワード" name = "password" id = "password" onblur = "checkpassword（）;"/> <span id = "passwordinfo"> </span>
</div>
<div>
パスワードの再入力：<入力タイプ= "パスワード" name = "repassword" id = "repassword" onblur = "checkrepassword（）;"/> <span id = "repasswordinfo"> </span>
</div>
<div>
名前：<入力型= "text" name = "name" id = "name" onblur = "checkname（）;"/> <span id = "nameinfo"> </span>
</div>
<div>
<入力型= "submit" value = "Register" />
</div>
</form>
</body>
</html>
レンダリングは次のとおりです。
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。