表单提交过滤提示

实现的功能是：

   当录入信息不满足条件的时候，弹框提示，减少前后端的交互，只有满足过滤条件的时候才提交表单

<form class="form-horizontal" method="POST" action="login" id="from">
    {{ csrf_field() }}
    @include('common.errors')
    <div>用户名<input type="text" name="username" id="username" value="{{ old('username') }}"></div>
    <div>邮&nbsp;  &nbsp;&nbsp;件<input type="email" name="email" id="email" value="{{ old('email') }}"></div>
    <div>密&nbsp;  &nbsp;&nbsp;码<input type="password" name="password" id="password"></div>
    <div style="margin-top: 5px">
        <input type="checkbox" name="remember" value="1"> 记住我
        {{--<button type="submit" style="margin-left: 90px" onclick="onSubmit()">登录</button>--}}
        <input type="button" style="margin-left: 90px" onclick="onSubmit()" value="登陆">
    </div>
</form>

以上是表单，下面试js过滤

<script>
    function onSubmit() {
        var username = $('#username').val();
        var email = $('#email').val();
        var password = $('#password').val();
        var isEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if(! username){
            alert('用户名不能为空');
            return ;
        }
        if(! email){
            alert('邮箱不能为空');
            return ;
        }else if(! (isEmail.test(email))){
            alert('请输入正确的邮箱格式');
            return ;
        }
        if(! password){
            alert('密码不能为空');
            return ;
        }
        $('#from').submit();
    }

</script>

可以看出来在方法onSubmit（）中，只有过滤满足的时候，才会获取form表单进行submit提交，

注意：提交按钮要用input，不要用button标签