表单验证--通过原生js模仿ajax的异步交互

时间：2022-02-01 05:27:00

今天给大家带来个福利，我也是刚刚学习的很实用的一个东西，通过原生js模仿ajax的异步交互。

我的博客只是给那些新手看的大神勿喷，写的不好可留言，请指出。

因为当初自己学的时候一个问题不会找人问，知道初学者都不容易，所以我在我的博客中分享自己的学习经验，以及一些好玩的东西！！

废话不多说开始吧：

还是从最初讲：表单：html+css+js

先是HTML:

表单

表单HTML代码：

<form id="reg" title="注册">
   　　<div class="user">
   　　　　<span>姓名：</span>
   　　　　　　<input type="text" name="user" placeholder="请输入用户名" onblur="judge(this)">
   　　　　　<span></span>
   　　</div>
   <div class="mima">
   　　<span>密码：</span>
   　　　　<input type="text" name="pass" placeholder="请输入密码" onblur="judge(this)">
   　　<span></span>
   </div>
   <div class="chongfu">
      <span>重复密码：</span>　　
      　　<input type="text" name="passag" placeholder="重复输入密码" onblur="judge(this)">
      <span></span>
   </div>
   <div class="zc">
      <input class="sub" type="submit" value="立即注册">
   </div>
</form>

JS代码：
//创建加载完成验证表单
window.onload = function (){
   //获取input name名为user的元素
   var user = document.querySelector("input[name=user]");
　 //获取input name名为pass的元素
   var pass = document.querySelector("input[name=pass]");
  //获取input name名为passag
   var passag = document.querySelector("input[name=passag]");
   /*用户名所在的input发生改变执行函数*/
   user.onblur = function(){
      //判断表单中name为user的元素的value值是否为空
      if(user.value == ""){
　　　　　//如果为空在当前元素的兄弟集span里面写入内容文字为账号不能为空
         this.parentNode.querySelector("input+span").innerText="账号不能为空";
      }else{
　　　　　　//如果不为空则不在兄弟集span里面写入文字
         this.parentNode.querySelector("input+span").innerText="";
      }
   }
   /*密码*/
   pass.onblur = function() {
      //判断表单中name为pass的元素的value值是否为空
      if(pass.value == ""){
         this.parentNode.querySelector("input+span").innerText="密码不能为空";
      }else{
         /*创建密码正则表达式*/
         var pae = /^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]{8,12}$/;
         /*用正则表达式匹配密码*/
         paep = pae.test(pass.value);
         /*判断匹配的结果*/
         if(!paep){
　　　　　　　　//不为真则在兄弟集写入文字内容密码格式不正确，然后input清空输入的内容
            this.parentNode.querySelector("input+span").innerText="密码格式不正确";
            pass.value="";
         } else{
            this.parentNode.querySelector("input+span").innerText="";
         }
      }
   }
   /*重复密码*/
   passag.onblur = function() {
      //判断表单中name为passag的元素的value值是否为空
      if(passag.value == ""){
         this.parentNode.querySelector("input+span").innerText="重复密码不能为空";
      }else{
         console.log(pass.value);
         if(passag.value !== pass.value) {
            this.parentNode.querySelector("input+span").innerText="密码不一致，请重新输入";
            passag.value="";
         } else {
            this.parentNode.querySelector("input+span").innerText="";
         }
      }
   }

其他的邮箱，验证都是同样的道理

CSS样式：这个就不多做讲解了，根据自己需求写自己的css样式

相关文章