JS 開発検証フォーム チュートリアル - 検証フォーム (4)
前のセクションでは、ユーザー名の長さの制御について説明しました
次に、js正規表現を使用してパスワードの形式とメールアドレスを制御する方法を見てみましょう
方法がわからなくても問題ありません正規表現を書く、オンラインでできるようになりました。メールアドレス用の既製の正規表現をたくさん見つけました
たとえば、パスワードを見てみましょう。数字と文字の組み合わせだけが必要です。 6 ~ 10 文字にする必要があります
var rel = /^[a-zA-Z0-9 ]{6,10}$/ ;
メールボックスの正規表現を見てみましょう
var reg = / ^w+((-w+)|(.w+))*@[A-Za-z0-9] +((.|-)[A-Za-z0-9]+)*.[A-Za-z0 -9]+$/;
規則性が完成しました。フォームを確認するにはどうすればよいですか?
テキストボックスの値を取得し、それを正規表現と照合する必要があります。一致しない場合は、プロンプトメッセージが表示されます
。 test()メソッドを使用します
test()メソッドは、文字列が特定のパターンに一致するかどうかを取得するために使用されます
数字と文字の組み合わせであるパスワードを確認してみましょう
var rel = /^[A-Za -z0-9]{6,10}$/;
var val1 = document.getElementById ('pwd').value; .test (Val1)) {
document.GetelementByid ("SP1")仕様を満たしていません!";
}
上記のコードのように、パスワードの検証が完了しました。実際、これはパスワードを検証する方法と似ています
var val2 = document.getElementById('email').value; ("sp2").innerHTML = "メールアドレスを入力してください!";
}else if(!reg.test(val2)){document.getElementById( "sp2").innerHTML = "メールの形式が間違っています!";
}
上記のコードで、メールアドレスを検証する機能が完成しました
完全なコードは次のとおりです:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;padding:0;} #div{width:410px;height:400px;background:#46a3ff;padding-left:16px; padding-top:20px;} input{ outline:none; box-sizing:border-box;padding-left:15px;} textarea{ outline:none;resize : none; box-sizing:border-box;padding-left:15px;padding-top:5px;} .name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;} .pwd{width:200px;height:30px; margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;} .email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;} .txt{ width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;} .sub{width:100px;height:30px;padding-left:0px; border:none; border-radius:5px;background:#ffd0ff;} .sub:hover{background:#ffaad5;} .div{ width:200px;height:30px;margin:0 auto;box-sizing:border-box;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;} </style> </head> <body> <div id="div"> <form> <label>用户名:</label> <input type="text" class="name" id="name"> <div id="sp" class="div"></div> <label>密 码:</label> <input type="password" class="pwd" id="pwd"> <div id="sp1" class="div"></div> <label>邮 箱:</label> <input type="text" class="email" id="email"> <div id="sp2" class="div"></div> <label>爱 好:</label> <textarea rows="5" cols="40" class="txt" id="txt"></textarea> <div id="sp3" class="div"></div> <input type="button" class="sub" value="注册" id="sub"> </form> </div> <script type="text/javascript"> var sub = document.getElementById('sub'); sub.onclick=function(){ //验证用户名是否为空,如果为空,给出提示信息 var val = document.getElementById('name').value; var rel = document.getElementById('name').value.length; //console.log(val.length); if(val == ""){ document.getElementById("sp").innerHTML = "用户名不能为空!"; }else if( rel <= 5 || rel > 10){ document.getElementById("sp").innerHTML = "格式不正确!"; } var rel = /^[A-Za-z0-9]{6,10}$/; var val1 = document.getElementById('pwd').value; if(val1 == ""){ document.getElementById("sp1").innerHTML = "请输入密码!"; }else if(!rel.test(val1)){ document.getElementById("sp1").innerHTML = "密码不符合规范!"; } //验证邮箱是否为空和邮箱的格式是否正确 var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; var val2 = document.getElementById('email').value; if(val2 == ""){ document.getElementById("sp2").innerHTML = "请输入邮箱!"; }else if(!reg.test(val2)){ document.getElementById("sp2").innerHTML = "邮箱格式不正确!"; } //验证内容是否为空 var val3 = document.getElementById('txt').value; if(val3 == ""){ document.getElementById("sp3").innerHTML = "请输入内容!"; } } //当用户名的文本框触发键盘事件,提示信息去除 document.getElementById('name').onkeyup=function(){ document.getElementById('sp').innerHTML = " "; } // //当密码框触发键盘事件,提示信息去除 document.getElementById('pwd').onkeyup=function(){ document.getElementById('sp1').innerHTML = " "; } // //当邮箱文本框触发键盘事件,提示信息去除 document.getElementById('email').onkeyup=function(){ document.getElementById('sp2').innerHTML = " "; } // //当文本域触发键盘事件,提示信息去除 document.getElementById('txt').onkeyup=function(){ document.getElementById('sp3').innerHTML = " "; } </script> </body> </html>