ホームページ >ウェブフロントエンド >jsチュートリアル >単純な JS フォーム検証 function_form 効果
Webサイト制作ではフォーム検証機能がよく使われます。
場合によっては、事前に作成された JS コントロールを使用する方が便利ですが、大きすぎて保守が困難です (私の JS レベルは高くありません)
そこで、単純に自分で作成しました。それが良いかどうか、柔軟かどうかについて、いくつかアドバイスをください(写真が最初に表示されていますが、醜いですが、気にしないでください):
コード:
var fv =
{
lang: "zh-cn", //错误提示语言
inValidedStr: "=", //初始随意复制,使其长度不为0
mail: function(elementID) //验证邮件地址合法,elementID为input文本输入框的ID
{
if (elementID == null) { return true; }
else
{
var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
if (reg.test(document.getElementById(elementID).value))
{
fv.inValidedStr = fv.inValidedStr.replace(/mail/g, "");
fv.inValidedStr = fv.inValidedStr.replace("=", "");
validMsg(fv.lang, "mail", "mailInfo");
}
else
{
fv.inValidedStr = fv.inValidedStr + "mail";
errorMsg(fv.lang, "mail", "mailInfo");
}
}
},
username: function(elementID) //验证用户名合法 字母数字下划线,长度为6-20
{
if (elementID == null) { return true; }
else
{
var reg = /^[a-zA-Z0-9_]{5,19}$/;
if (reg.test(document.getElementById(elementID).value))
{
fv.inValidedStr = fv.inValidedStr.replace(/username/g, "");
fv.inValidedStr = fv.inValidedStr.replace("=", "");
validMsg(fv.lang, "username", "usernameInfo");
}
else
{
fv.inValidedStr = fv.inValidedStr + "username";
errorMsg(fv.lang, "username", "usernameInfo");
}
}
},
//....可以加其他验证
isValid: function() { return (fv.inValidedStr.length == 0); }
};
//验证成功时的信息 elementID 为信息提示的html单元的id
function validMsg(lang, valueType, elementID)
{
var msgInfo = "";
var isCn = lang == "zh-cn";
switch (valueType)
{
case "mail":
msgInfo = isCn ? " √ アドレスは有効です" : " √ メール アドレスは有効です";
Break;
case "ユーザー名":
msgInfo = isCn ? " √ 成功" : " √ アカウントが検証されました ";
Break;
case "パスワード":
msgInfo = isCn ? " √ 成功" : √ 検証された形式!";
Break;
//....同様に他の状況を追加します
default:
Break;
}
document.getElementById(elementID).innerHTML = msgInfo;
document.getElementById(elementID).style.color = "緑";
}
//検証失敗時の情報
function errorMsg(lang, valueType, elementID)
{
var msgInfo = "";
var isCn = lang == "zh-cn"; 🎜>
switch (valueType)
{
case "mail":
msgInfo = isCn ? " × 正しいメールアドレスを入力してください" : " × メールの形式がエラーです、入力してください適切な形式 .例: abc@def.com.";
ブレーク; アンダースコア形式 ": " ;
d(elementID ).style.color = "red";
}
フロントエンド コード (aspx ページ):
コードをコピー
コードは次のとおりです: