这篇文章主要讲解了“Ajax注册用户时如何实现表单验证功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Ajax注册用户时如何实现表单验证功能”吧！
很多时候在网站上注册时，我们会发现，注册表单通常需要检查用户名和电子邮件地址的可用性；从而确保用户之间不拥有相同的用户名和电子邮件地址；一些网站喜欢在用户提交填写的用户信息时，做信息可用性的检查，而一些网站会做实时的用户名和电子邮件地址可用性检查，例如：“用户名”文本框失去焦点时；就用户体验来说，实时的用户信息检查用户体验效果更好，而不是在表单提交后，告诉用户信息不符合系统要求。
下面截图是新浪微博的注册界面，它采用的是实时的用户信息检查，如：手机号码和用户名等信息。
图1新浪微博注册表单
1、正文
假设，现在要求我们实现一个注册界面并且它采用实时方式检查用户信息是否符合系统的要求。
其中，注册界面包含：用户名，邮件地址，密码和微博地址等信息；实时检查：当文本框失去焦点时对信息进行实时检查，例如：“用户名”文本框失去焦点时，触发页面发送Ajax请求，到数据库中用户是否可用，接着把查询结果返回到前端页面中。
对于表单输入检查，我们将使用前一博文《自定义jQuery插件Step by Step》中，自定义表单信息检查插件对输入信息进行检查。
图2注册验证过程
注册表单设计
现在，让我们定义注册表单，它包含：用户名，邮件地址，密码和微博地址等信息，由于时间的关系，我们已经把注册表单界面的定义好了，具体实现代码如下：
<body> <div id="Div1"> <!-- Start Sign Up Form --> <form action="#signup-form" id="Form1"> <h3> Sign Up</h3> <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="">Sign in</a>.</p> </div> </form> <!-- End Sign Up Form --> </div> </body>上面，我们实现了注册表单，它包含：用户名，邮件地址，密码和微博地址文本框，当“用户名”失去焦点时，发送Ajax请求实时检查用户名是否可用，并且动态地加载图片表示检查中和相应的检查结果。
图3注册表单
jQuery Validation插件
现在，我们需要修改一下前一博文中定义的表单检查控件，需要增加用户名检查和文本框失去焦点事件（blur event）。
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
