Ajax注册用户时实现表单验证

时间：2021-05-28

很多时候在网站上注册时，我们会发现，注册表单通常需要检查用户名和电子邮件地址的可用性；从而确保用户之间不拥有相同的用户名和电子邮件地址；一些网站喜欢在用户提交填写的用户信息时，做信息可用性的检查，而一些网站会做实时的用户名和电子邮件地址可用性检查，例如：“用户名”文本框失去焦点时；就用户体验来说，实时的用户信息检查用户体验效果更好，而不是在表单提交后，告诉用户信息不符合系统要求。

下面截图是新浪微博的注册界面，它采用的是实时的用户信息检查，如：手机号码和用户名等信息。

图1新浪微博注册表单

1、正文

假设，现在要求我们实现一个注册界面并且它采用实时方式检查用户信息是否符合系统的要求。

其中，注册界面包含：用户名，邮件地址，密码和微博地址等信息；实时检查：当文本框失去焦点时对信息进行实时检查，例如：“用户名”文本框失去焦点时，触发页面发送Ajax请求，到数据库中用户是否可用，接着把查询结果返回到前端页面中。

对于表单输入检查，我们将使用前一博文《自定义jQuery插件Step by Step》中，自定义表单信息检查插件对输入信息进行检查。

图2注册验证过程

注册表单设计

现在，让我们定义注册表单，它包含：用户名，邮件地址，密码和微博地址等信息，由于时间的关系，我们已经把注册表单界面的定义好了，具体实现代码如下：

<body> <div id="Div1"> <!-- Start Sign Up Form --> <form action="#signup-form" id="Form1"> <h2> Sign Up</h2> <fieldset> <div class="fieldgroup"> <label for="name"> Name</label> <input class="form_element" type="text" name="name" validation="required nameAvailable" /> <span class='availability_status'></span> </div> <div class="fieldgroup"> <label for="email"> Email</label> <input class="form_element" type="text" name="email" validation="email" /> <span></span> </div> <div class="fieldgroup"> <label for="password"> Password</label> <input class="form_element" type="password" name="password" validation="password" /> <span></span> </div> <div class="fieldgroup"> <label for="weibo"> Weibo</label> <input class="form_element" type="text" name="weibo" validation="url" /> <span></span> </div> <div class="fieldgroup"> <input type="submit" class="submit" value="Sign up"> <span></span> </div> </fieldset> <div class="fieldgroup"> <p> Already registered? <a href="http://plete(function(event, request, settings) { if (data == false) { $('.availability_status').html(''); $('.availability_status').removeClass('tick'); $('.availability_status').addClass('error'); return true; } else { $('.availability_status').html(''); $('.availability_status').removeClass('error'); $('.availability_status').addClass('tick'); return false; } }); }});

最后，我们在注册表单中添加调用自定义验证控件的jQuery代码，具体实现如下：

<script type="text/javascript"> // Sets display image size. pic = new Image(16, 16); pic.src = "loader.gif"; $(function() { // jQuery DOM ready function. // Get the form object. var signUpForm = $("#signup-form"); // Invokes the validation method. signUpForm.validation(); });</script>

图6用户注册界面

如果大家还想深入学习，可以点击两个精彩的专题：jquery表单验证大全 JavaScript表单验证大全

本文主要介绍了Ajax注册表单的设计，通过发送Ajax请求方式实时地检查用户名的可用性，并且使用了自定义的表单验证插件检查输入信息的正确性。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章