邮箱密码验证-原理
原理版：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表單驗證</title><style>* {padding: 0;margin: 0;}#myForm {width: 400px;padding: 20px;margin: 50px auto;border: 1px solid #eee;}input {margin: 20px 20px 20px 10px;padding: 5px 10px;}</style><script src="../js/jquery.min.js"></script><script>$(function () {var flag = false; // blur: 元素失去光標觸發的事件； $("#txt").blur(function () {var re = /\w+@\w+(\.\w){1,3}/;if (re.test($(this).val())) {$("span").eq(0).html("輸入正確").css("color", "green");flag1 = true;} else {$("span").eq(0).html("格式錯誤").css("color", "red");flag1 = false;}})$("#pwd").blur(function () { // ^: 在中括號里表示取反（排除）， 在中括號外表示從頭開始； // $: 表示結尾。var re = /^\S{6,12}$/;if ( re.test($(this).val()) ) {$("span").eq(1).html("輸入正確").css("color", "green");flag2 = true;} else {$("span").eq(1).html("格式錯誤").css("color", "red");flag2 = false;}})$(":submit").click( function () { // triggerHandler: 自動觸發事件； $("#txt").triggerHandler("blur");$("#pwd").triggerHandler("blur");if ( flag1 == false || flag2 == false ) {return false;}})})</script> </head> <body> <form action="http://www.baidu.com" id="myForm">郵箱： <input type="text" id="txt"><span></span> <br>密碼： <input type="password" name="" id="pwd"><span></span> <br><input type="submit" value="提交"> </form></body> </html>升級適應版：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.ok {color: green;}.error {color: red;}</style><script src="../js/jquery.min.js"></script><script>$(function () {$("#user").blur(function () {var re = /\w+@\w+(\.\w+){1,3}$/;if ($(this).parent().find(".ok,.error").length > 0) {$(this).parent().find(".ok,.error").remove();}if (re.test($(this).val())) {$(this).parent().append("<span class='ok'>格式正確</span>");} else {$(this).parent().append("<span class='error'>格式錯誤</span>");}});$("#pwd").blur(function () {var re = /\w{6,20}$/;if ($(this).parent().find(".ok,.error").length > 0) {$(this).parent().find(".ok,.error").remove();}if (re.test($(this).val())) {$(this).parent().append("<span class='ok'>格式正確</span>");} else {$(this).parent().append("<span class='error'>格式錯誤</span>");}});$(":submit").click(function () {$("#user").triggerHandler("blur");$("#pwd").triggerHandler("blur");if ($("#userForm").find(".error").length > 0) {return false;}});});</script> </head> <body><form action="http://www.baidu.com" id="userForm"><p>郵箱: <input type="text" name="" id="user"></p><p>密碼: <input type="text" name="" id="pwd"></p><p><input type="submit" value="注冊" id="reg"></p></form> </body> </html>?
?
轉載于:https://www.cnblogs.com/wangyihong/p/6441019.html
總結
- 上一篇： I/O(输入/输出)---序列化与反序列
- 下一篇： 你所不知道的mybatis居然也有拦截器