验证邮箱的唯一性

1. 获取文本框为其添加离开焦点事件
2. 离开焦点时，检测用户输入的邮箱地址是否符合规则
3. 不符合规则，阻止继续执行
4. 向服务器发送请求，检测是否被别人注册
5. 根据服务器返回提示信息

<input type="email" id="email">
<p id="info"></p>

<script>
    var emailInfo=document.getElementById('eamil')
    var info = document.getElementById('info');

    eamilInfo.onblur=function(){
        var eamil=this.value;
        var reg=//;
        if(!reg.test(eamil))
        {
            //给出用户提示
            info.innerHTML='请输入正确的邮箱';
            info.className = 'bg-danger';
            return ;
        }
        //根据接口文档编写ajax 
        // 简要描述
        // 请求地址
        // 请求方式
        // 参数
        // 返回值
        $.ajax({
            type:'get',
            url:'http://localhost:3000/verifyEmailAdress',
            data:{
                eamil:eamil
            },
            success:function(result){
                console.log(result);
                info.innerHTML=result;
                info.className='bg-success';
            },
            error:function (result) {
                console.log(result);
                info.innerHTML=result;
                info.className='bg-danger';
            },

        }),
    }
</script>

<form action="/login" id="f1">
    <input type="text" name="username">
    <input type="password" name="password">
    <button type="submit">提交</button>
</form>

<script>
    $(function(){
        //第一种方式
        $('#f1').submit(function(){
            alert("监听到了");
        });

        //第二种方式 表单绑定事件
        $('#f1').on('submit',function(){
            alert("监听到了");
        });
        //组织表单默认提交行为
        $('#f1').submit(function (e) {
            alert("监听到了");
            e.preventDefault();//不会再跳转
        });
        $('#f1').on('submit', function (e) {
            alert("监听到了");
            e.preventDefault();
        });
        //快速获取表单数据 seriliable
        // ajax发送请求前 获取表单数据
        //form中输入框很多，要操作很多次dom
        //使用serialize()函数,一次性获得表单所有数据,必须有name属性

        //username=&password=
        $('#f1').on('submit', function (e) {
            var data= $('#f1').serialize();

        });
    })
</script>

<script>
    $.get(url,[data],[callback])
    //不带参数
    $.get(url,function(res){
        console.log(res);
    })
    //带参数
    $.get(url,{id:1},function(res){
        console.log(res);
    })
</script>