前端技巧--表单验证，通过原生js模仿ajax的异步交互

今天给大家带来个福利，我也是刚刚学习的很实用的一个东西，通过原生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代码：

<script>
    //创建加载完成验证表单
    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 = "";
                    }
                }
            }
</script>

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

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