PHP表单验证(jQuery)

<div>
        <form method="post" action="{{url('admin/updateEmployees')}}" enctype="multipart/form-data">
            <input type="hidden" name="user_id" value="{{$getAdminInfo->user_id}}">
            {{ csrf_field() }}
        <div class="form-group">
            <label>员工名字:</label>
            <input type="text" name="user_name" value="{{$getAdminInfo->user_name}}">
            <span class="nameTip tip"></span>
        </div>
        <div class="form-group">
            <label>员工邮箱:</label>
            <input type="text" name="user_email"value="{{$getAdminInfo->user_email}}">
            <span class="emailTip tip"></span>
        </div>
        <div class="form-group">
            <label>员工电话:</label>
            <input type="text" maxlength="11" id="phone" name="user_phone" autocomplete='tel' value="{{$getAdminInfo->user_phone}}">
            <span class="phoneTip tip"></span>
        </div>
        <div class="form-group">
            <label>员工等级:</label>
            <input type="text" name="user_lvl_id" value="{{$getAdminInfo->user_lvl_id}}">
        </div>
        <div class="form-group">
            <label>部门ID</label>
            <input type="text" name="department_id" value="{{$getAdminInfo->department_id}}">
        </div>
            <input type="submit" class="btn register-long-btn" value="提交" id="register" style="width: 346px;height: 40px;">
        </form>
</div>
<script type="text/javascript" src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script type="text/javascript">
    var Email = false;
    var Uname = false;
    var Phone = false;
    //            验证邮箱
    $('input[name=user_email]').blur(function(){//用户名文本框失去焦点触发验证事件
        email = $(this).val();
        if(email==''){
            $('.emailTip').html('<font color="red">邮箱不能为空</font>');
            Email= false;
        }else{
            var emailReg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
            if (!emailReg.test(email) ){
                $('.emailTip').html('<font color="red">请填写正确的邮箱地址</font>');
                Email= false;
            }else{
                $('.emailTip').html('<font color="aqua">OK</font>');
                Email= true;
            }
        }
    });
    //            验证用户名
    $('input[name=user_name]').blur(function(){//用户名文本框失去焦点触发验证事件
        username = $(this).val();
        if(username==''){
            $('.nameTip').html('<font color="red">用户名不能为空</font>');
            Uname= false;
        }else{
            var reg = /^[a-zA-Z0-9_-]{3,16}$/;
            if (!reg.test(username) ){
                $('.nameTip').html('<font color="red">用户名长度必须为3-16位,且以大小写字母数字或下划线开头</font>');
                Uname= false;
            }else{
                $('.nameTip').html('<font color="aqua">OK</font>');
                Uname= true;
            }
        }
    });

    //验证手机号
    $(function () {
        $('#phone').blur(function () {
            // 检验phone的唯一性
            var phone = $("input[name='user_phone']").val();
            var reg = /^1[2|3|4|5|7|8]\d{9}$/;
            if (phone == '') {
                $('.phoneTip').html('<font color="red">手机号不能为空!</font>');
                Phone = false;
            }
            if (reg.test(phone)) {
                $('.phoneTip').html('<font color="aqua">OK</font>');
                Phone = true;
            } else {
                $('.phoneTip').html('<font color="red">请输入正确的手机号码!</font>');
                Phone = false;
            }
        });
    });
    $('#register').bind('click', function () {
        if (Email && Uname && Phone) {
             return true;
        } else {
            return false;
        }
    });
</script>

猜你喜欢

转载自blog.csdn.net/qq_38191191/article/details/80931262