这里我是写了一个简单的注册表单验证功能，亲测有效，一起来看看吧！

首先我的HTML代码是这样的：

class大家可以忽略一下，这里我项目使用的是bootstrap的样式。

输入用户名和密码用的是正则表达式控制格式，在title里有描述。

最后一行的h6标签用来存放提示信息。

1 
     
       2       
      
        3         
       
         4           
         5           
        
          6             
          8           
        
 9         
       
10         
       
        11           
        12           
        
         13             
         15           
        
16         
       
17         
       
        18           
        19           
        
         20             
         22           
        
23         
       
24         
       
        25           
        
         26             
         新用户注册27           
        
28         
       
29       
      
30     
     
 31     

 

这是我的函数，当点击提交时触发，由于获取json数据在network里明文显示了，那么这里我使用了md5加密，使用方法是加入js文件，括号里放字符串就能自动加密成密文，可以在注册后将输入的密码传回后台保存，登录时返回密文进行对比就行。这里要注意的是：md5加密是不可转回的，别人就算获取了你的密文也没办法破解你的密码，但是如果你的业务需求需要保存用户的密码可以使用其他加密方法。

解释补充在了注释里

1 addUserNormal(e){ 2          var password1 = md5(this.user.password1); 3          var password2 = md5(this.user.password2); 4          var No = md5(); 5          var num = 0; 6          var alertHtml = document.getElementById("alert"); 7          if(!this.user.username){ 8           alertHtml.innerHTML="用户名为空，请正确填写!"; 9           alertHtml.style.display="block";10           }11           else if(password1 === No || password2 === No){
   //若有一个密码为空，则出现提示信息12             alertHtml.innerHTML="密码为空，请正确填写!";13             alertHtml.style.display="block";14           }15 　　　　　 else if(password1 != password2){
   //若密码不一致，则出现提示信息16             alertHtml.innerHTML="密码不一致，请正确填写!";17             alertHtml.style.display="block";18 　　　　　 }19           else{20             for(var i = 0; i < this.users.length; i++){
   //遍历获得的总用户名   21               if(this.user.username === this.users[i].username){22                 num++;   //r若有注册过，则num会变动23               }24             }25             if(num != 0){ 26               alert("用户名"+this.user.username+"已注册!");27               //这里希望有注册的用户名后刷新页面            28               return;29             }30             let userNormal = {31               username:this.user.username,32               password:password1,33             }34             $.post("http://localhost:3000/userNormal",userNormal).35             then(function(response){36                  // console.log(response);//传回成功信息37                  alert("用户"+userNormal.username+"注册成功！");38                  window.location.href="LoginNormal.html";39               })40           }41           e.preventDefault();//这里好像是阻止了登录时候的刷新,如果你输入错了，这里还是有用处42         }

加油啊柯基~