前端表单验证-优快云博客

本文链接：https://blog.youkuaiyun.com/snow_love_xia/article/details/80452626

本文介绍了一个使用JavaScript实现的前端表单验证方法。该方法能在用户提交表单前检查用户名、邮箱及密码是否符合预设规则，并给出即时反馈，避免了无效数据提交到服务器端。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现的功能是：

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

<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>