网站注册的简单实现

在做黑马旅游网的新用户注册页面时，尝试使用jQuery、Ajax实现页面的实时输入信息判断，在前端jsp拦截一些无效注册信息，缓解服务器压力。代码比较长，分几段总结经验。

最终的效果

对于新用户注册，在注册按钮按下之前，有两个参数不得不调给后台验证，一个是用户名是否存在（调用后台数据库比对），一个是验证码是否正确（验证码是后台代码生成的）。其他的判断均可以通过前台JS中的jQuery实时完成，比如用户名是否过长、密码是否过短等格式不正确或漏填项，这样即使按下注册，表单信息也不会发给后台，只有在所有项目填写正确后，才会再发送后台添加新用户的数据。

1. 首先引入jQuery库

   <script src="js/jquery-3.3.1.js"></script>

2. 对于普通项的前端验证，截取密码项为例：

   <script>
       function checkPassword() {
        
           let password = $("#password").val();
           let reg_password = /^\w{8,20}$/;
           let span = $("#s_password")
           let flag = reg_password.test(password);
           if (password == null || password === "") {
        
               span.empty();
           }
           if (password != null && password !== "" && flag) {
        
               span.html("✔");
           } else if (password != null && password !== "" && !flag) {
        
               span.html("❌");
           }
           return flag;
   	}
   	...
   </script>
   

   正则表达式：/^\w{8,20}$/代表8到20位密码，可以识别大小写字母、数字和下划线，当然目前的密码一般要求大小写字母、数字至少各包含一位，稍作修改即可。

   如果密码项为空，则用$("#s_password").empty();删除<span></span>项，相当于提示不会出现；如果密码项非空但是不符合格式要求，那么给个错误提示，否则给正确提示。

   这里的flag留作后面判断是否允许表单传数据给后台，因此需要函数有返回值。

   总结一下判断各表单项用到的正则表达式：

   • 用户名：/^[a-zA-Z0-9_-]{4,16}$/ ==> 4到16位字符串，可以接受大小写字母、数字、下划线和减号
   • 密码：/^\w{8,20}$/ ==> 8到20位密码，可以识别大小写字母、数字和下划线
   • 邮箱：/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ ==> 大小写字母、数字、减号+@+大小写字母、数字…
   • 真实姓名：/^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/ ==> 不能有特殊字符和数字；可以输入英文，可以有空格，可以输入英文名字中的点；可以输入汉字；中文英文不能同时出现；长度在1-20
   • 手机号：/^1[345678]\d{9}$/ ==> 接受首位为1，次位为3~8的11位手机号
   • 验证码只需判断是否为空或填写错误。

3. 对于用户名和验证码判断，以用户名判断为例：

   <script>
       ...
       let flag_username;
       let flag_checkcode;
       $(function () {
        
           $("#username").blur(function () {
        
               let username = $(this).val();
               let span = $("#s_username");
               let reg_username = /^[a-zA-Z0-9_-]{4,16}$/;
               flag_username = reg_username.test(username);
               if (username == null || username === "") {
        
                   // span.empty();
                   span.html("❌");
                   flag_username = false;
               } else if (username != null && username !== "" && !flag_username) {
        
                   span.html("❌");
               } else {
        
                   $.get("isUserNameExists", {
        username: username}, function (data) {
        
                       span.html(data