一般前端登录表单提交校验方法

一般前端登录表单提交校验方法
html

<form action=""  method="post">
    <div class="inputItem flex">
        <p>手机号码：</p>
        <input type="tel" placeholder="请输入手机号码" id="userPhone" name="userPhone">
    </div>
    <div class="inputItem flex">
        <p>密码：</p>
        <input type="password" placeholder="请输入密码" name="password" id="password">
        <!--<div class="eyeIcon">-->
            <!--<img src="" class="imgwh" alt="">-->
        <!--</div>-->
    </div>
    <div class="remember">
        <input type="checkbox" id="remember_name"/><label for="remember_name">记住登录状态</label>
    </div>
    <div class="loginBtn">
        <input type="button" class="login" onClick="checkSubmit()" value="登录">
    </div>
</form>

js

<script>
    // 表单提交
    function checkSubmit() {
        // 去除前后空格
        var userPhone = $.trim($('#userPhone').val());
        var password = $.trim($('#password').val());
        if(userPhone == ''){
            showErrorMsg('手机号码不能为空！');
            return false;
        }
        if(!checkMobile(userPhone)){
            showErrorMsg('手机号码格式不对!');
            return false;
        }
        if(password == ''){
            showErrorMsg('密码不能为空！');
            return false;
        }

        $.ajax({
            type : 'post',
            url : 'xxxxxxxxxxxxxxxxxxxxxx',
            data:{
                userPhone:userPhone,
                password:password
            },
            dataType:'json',
            success:function(res){
                if(res.status == 1){
                    // 跳转
                    window.location.href = res.url;
                }else{
                    showErrorMsg(res.msg);
                }
            },
            error:function(XMLHttpRequest,textStatus,errorThrown){
                showErrorMsg('网络失败，请刷新页面后重试')
            }
        })
    }
    // 检验手机号码
    function checkMobile(tel){
        var reg = /(^1[3|4|5|7|8][0-9]{9}$)/;
        if(reg.test(tel)){
            return true;
        }else{
            return false;
        }
    }
    // 信息提示
    function showErrorMsg(msg){
        alert(msg);
    }
</script>