Ajax小实例2验证注册框-经验总结

今天做了第二个关于ajax的实例, 验证注册框, 一些比较主要的代码跟前一篇验证登录框差不多, 但是我做了一部分的改动, 下面还是来讲讲我是如何制作的以及一些需要注意的地方.

这个实例的思路是: 一个前端页面上有两个输入框和注册按钮, 如果用户什么都不输入直接点击注册框的话会弹出对话框提醒用户输入内容, 此外通过JS限制密码的输入只能是数字和英文字母的组合, 不能是特殊字符, 输入符合要求的内容后点击注册按钮, JS将输入的数据整理成数据传送的格式, 然后将数据传递到后台的PHP文件, PHP从MYSQL数据库读取数据, 然后检测用户输入的用户名在数据库中是否存在, 如果存在则返回内容并在前端提示用户"用户名已存在", 如果在数据库中不存在则返回内容并在前端提示用户"注册成功". 制作的步骤如下:

一. 在MYSQL数据库上建立数据库和数据表并插入数据

二. 准备前端静态页面

其中类名为error的两个span是用来提醒用户输入正确的数据的, 一开始都是隐藏的

三. JS文件

这个是看了妙味课堂视频后编写的一个通过类名获取元素的方法, 因为JS原生的getElementsByClassName在IE8及更早版本是没办法使用的, 为了浏览器的兼容性自己编写了这个函数, 显示获取页面上所有的元素, 然后通过className属性获取每个元素具有的类名, 然后将类名与传入的参数className进行比较, 如果匹配则push存入数组中, 最后返回数组

这一部分是用作验证用户是否已输入数据且数据是否符合要求, 第5行为调用刚刚自定义的函数getElementsByClassName, 第17-19行使用正则表达式验证用户输入的密码是否为纯数字和英文字母的组合, 如果不符合要求则将类名为error的元素显示出来, 也就是在前端页面的输入框旁边会有红色的字体提示用户输入错误, 如果用户输入的数据没有问题, 第22行调用deliverData将数据作为参数传入.

deliverData函数的作用是将用户输入的数据整理成可以通过ajax传输的格式, 然后调用编写好的ajax方法.

这个是上一篇文章提到的封装好的调用ajax的方法, 这个方法编写的很完整, 考虑到了使用get方式和post方式的差别, 同时还考虑了浏览器兼容的问题.

四. 后台处理数据的PHP文件validateRegister.php

这个PHP就是从数据库获取数据然后与前端传入的数据进行比较然后执行一些操作, 每个语句块代表的含义在注释中都说明了这里不再赘述. 注册的数据验证比较简单, 只要查看用户输入的用户名在数据库中是否存在就行了, 如果存在则返回"已存在", 如果没有则返回"成功".

在前面说的JS文件中的ajax方法中的回调函数中根据返回的文字信息"已存在"还是"成功"执行不同的操作.aErrorSpan[0]用于在前端页面上显示文字提醒用户"用户名已存在".