使用 JQUERY 的 用户认证和注册技术
如果您对 jQuery 不是很熟悉,它本质上是一个 JavaScript 库,使 JavaScript 开发变得很容易。它使所需的代码量最小化,因为它有许多内置功能,这样您就不再需要为这些功能编写客户端函数或对象了。更多信息和下载 jQuery 库的链接,见 参考资料;或者,如您在所有代码样例中看到的那样,可以直接嵌入 jQuery 库的当前版本。
无需重载即可提交一个表单在很多场景中都是很有用的。 例如,有了它,您就可以在提交表单之前使用 JavaScript 代码验证表单字段,来在一个单页面应用程序中提交表单或者 — 如本文所示— 确定是否用户名已经注册过。使用 jQuery 触发一个表单提交有两种方法:使用 submit
处理函数或 click
处理函数。清单 1 显示了如何使用 submit
处理函数提交一个表单。
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#submitForm').submit(function(e) { alert($('#sample').attr('value')); return e.preventDefault(); }); }); </script> <form id="submitForm" method="post"> <input type="text" name="sample" id="sample" value="Enter something" /> <input type="submit" id="submitBtn" value="Submit" /> </form>
清单 2 展示如何使用 click
处理函数提交表单。
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#submitBtn').click(function(e) { alert($('#sample').attr('value')); return e.preventDefault(); }); }); </script> <form id="submitForm" method="post"> <input type="text" name="sample" id="sample" value="Enter something" /> <input type="submit" id="submitBtn" value="Submit" /> </form>
这两个清单基本上是一样的:它们都是嵌入 jQuery 库的,在访问任何元素之前使用 ready
处理函数确认页面被加载,处理函数包括相同的代码。惟一的不同是处理函数和分配给处理函数的元素。submit
处理函数需要分配一个表单元素,而 click
处理函数,任何可点击的元素即可 — 本例中是 Submit 按钮。为了避免提交表单时刷新页面,您必须使用preventDefault
函数。要访问 preventDefault
函数,您必须传递处理函数(即使作为一个参数)或者使用它访问该函数。
尽管以上两种选择都是有效的,但 submit
处理函数更为常用些。然而,有些情况下,您可能又不止一个 Submit 按钮,这就需要每个按钮一个 click
处理函数。清单 3 展示了这样一个必须使用 click
处理函数的场景,因为两个 Submit 按钮都能触发表单提交。
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> <script type="text/javascript" src="register.js"></script> <div id="container"> <div id="message"></div> <form method="post" id="mainform"> <label for="username">Username</label> <input type="text" name="username" id="username" value="" /> <label for="password">Password</label> <input type="password" name="password" value="" /> <input type="submit" name="action" id="login" value="Log in" /> <h2>Extra options (registration only)</h2> <label for="firstname">First name</label> <input type="text" name="firstname" value="" /> <label for="lastname">Last name</label> <input type="text" name="lastname" value="" /> <label for="email">Email</label> <input type="text" name="email" value="" /> <input type="submit" name="action" id="register" value="Register" /> </form> </div>
注意,在本例中这个表单可以执行多个活动:现有用户可以登录,新用户可以通过输入附加账户信息进行注册。使用表单上的 submit
处理函数在这种场景中不能运行,因为它不能确定哪个按钮触发表单提交。因此,清单 4 使用 click
处理函数来确定每个按钮采取什么行动,便于您以后依此处理数据。
$(document).ready(function() { $("#register, #login").click(function(e) { var name = ($(event.target).attr('id') == 'register') ? 'Registration' : 'Login'; return e.preventDefault(); }); });
文档准备好后,您需要为 Register 和 Login 按钮分配 click
处理函数。click
处理函数接收一个参数,命名为 e
(作为事件) 。此事件对象稍后用来预防默认表单提交。正如之前代码所述。当 click
处理函数被调用时,当前被点击的对象的 ID 被访问,用来确定这是一个用户登录还是一个新用户注册。
推荐文章
2024-01-16
2024-01-11
2024-01-04
2023-12-04
2023-11-20
2023-11-14
2023-11-06
2023-10-30
2023-10-13
2023-10-10
稳定
产品高可用性高并发贴心
项目群及时沟通专业
产品经理1v1支持快速
MVP模式小步快跑承诺
我们选择声誉坚持
10年专注高端品质开发