这里我是写了一个简单的注册表单验证功能，亲测有效，一起来看看吧！
首先我的HTML代码是这样的：
class大家可以忽略一下，这里我项目使用的是bootstrap的样式。
输入用户名和密码用的是正则表达式控制格式，在title里有描述。
最后一行的h6标签用来存放提示信息。
1 <form class="form-horizontal" v-on:submit="addUserNormal"> 2 <div class="form-position"> 3 <div class="form-group"> 4 <span class="glyphicon glyphicon-user control-label col-sm-2"></span> 5 <div class="col-sm-6"> 6 <input type="text" class="form-control" id="username" 7 placeholder="请输入用户名" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$" title="用户名格式为:字母开头，允许5-16字节，允许字母数字下划线" v-model="user.username"> 8 </div> 9 </div> 10 <div class="form-group"> 11 <span class="glyphicon glyphicon-question-sign control-label col-sm-2"></span> 12 <div class="col-sm-6"> 13 <input type="password" class="form-control" id="password1" 14 placeholder="请输入密码" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$" title="密码请输入以字母开头，长度在5~17 之间，只能包含字符、数字和下划线组成的字符串" onpaste="javascript: return false;" v-model="user.password1"> 15 </div> 16 </div> 17 <div class="form-group"> 18 <span class="glyphicon glyphicon-question-sign control-label col-sm-2"></span> 19 <div class="col-sm-6"> 20 <input type="password" class="form-control" id="password2" 21 placeholder="再次输入密码" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$" title="密码请输入以字母开头，长度在5~17 之间，只能包含字符、数字和下划线组成的字符串" onpaste="javascript: return false;" v-model="user.password2"> 22 </div> 23 </div> 24 <div class="form-group middle"> 25 <div class="col-sm-6"> 26 <button type="submit" class="login-btn-position btn btn-block btn-success">新用户注册</button> 27 </div> 28 </div> 29 </div> 30 </form> 31 <h6 id="alert" class="alert"></h6>
这是我的函数，当点击提交时触发，由于获取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 }
加油啊柯基~