用JQuery实现添加用户(用户注册登录同理)表单验证功能

form表单部分

<!-- onsubmitb表单提交事件把 CheckFrom() 的结果 return 回来 如果是false的话阻止表单提交  -->
<form action="" method="post" enctype="multipart/form-data" onsubmit="return CheckFrom()"> 
    <div class ="form-group"> 
        <label for="exampleInputEmail1">账号</label> 
        <!-- onfocus 获取焦点事件 获取焦点时提示;onblue 失去焦点事件 失去焦点时验证 -->
        <input type="text" class="form-control" id="uname" placeholder="请输入账号" autocomplete="off" onfocus="focusUname()" onblur="blurUname()" > 
        <p class="help-block" id="unamemsg"></p>
    </div>
     <div class="form-group"> 
         <label for="exampleInputPassword1">密码</label> 
         <input type="password" class="form-control" id="pass" placeholder="请输入密码" onfocus="focusPass()" onblur="blurPass()"> 
         <p class="help-block" id="passmsg"></p>
     </div> 
     <div class="form-group"> 
         <label for="exampleInputPassword1">确认密码</label> 
         <input type="password" class="form-control" id="repass" placeholder="请输入确认密码" onblur="blurRepwd()"> 
         <p class="help-block" id="repassmsg"></p>
     </div> 
     <div class="form-group"> 
         <label for="exampleInputFile">上传头像</label>
         <input type="file" id="fileName" onblur="blurfileName()">
         <p class="help-block" id="fileNameMsg">只支持.jpg|.jpeg|.gif|.png结尾的图片</p> 
     </div> 
     
     <button type="submit" class="btn btn-default">提交</button> 
</form>

JQuery部分

<script type="text/javascript">
    // 总检测函数 如果账号,密码,确认密码,头像上传, 其中有一项错误表单无法提交
    function CheckFrom(){
        if (blurUname()==false || blurPass()==false ||blurRepwd()==false ||blurRepwd()==false) {
            return false;
        } else {
            return true;
        }
    }
    // uname获取焦点函数
    function focusUname(){
        // 获取uname后边的p标签,获取焦点时加上提示
        var unamemsg = $('#unamemsg').html('6~18位的除特殊字符外的任意字母、数字、汉字');
    }
    
    // uname失去焦点的函数
    function blurUname(){
        // 获取uname的值
        var uname = $('#uname').val();
        // 如果uname为空的话改变提示信息并且字体改成红色
        if(uname == "") {
            var unamemsg = $('#unamemsg').html('请输入账号').css('color','red');
            return false;
        }
        // 定义正则 (除特殊字符外的任意6~18位的字母、数字、下划线、汉字)
        var reg =  /^[^\~\`\!\@\#\$\%\^\&\*\(\)\-\_\+\=\{\}\[\]\|\\\;\:\'\"\,\.\<\>\/\?]{6,18}$/;
        // 验证 正则匹配
        var flag = reg.test(uname);
        if (flag){
            //验证成功 改变提示信息
            var unamemsg = $('#unamemsg').html('格式正确').css('color','');
        }else {
            //验证失败 改变提示信息和颜色 返回false
            var unamemsg = $('#unamemsg').html('格式不正确').css('color','red');
            return false;
        }
    }

    // password获取焦点函数
    function focusPass(){
        // 获取uname后边的p标签 添加提示信息
        var passmsg = $('#passmsg').html('以字母开头，长度在6~18之间，只能包含字母、数字和下划线');
    }

    // password失去焦点的函数
    function blurPass(){
        // 获取pass的值
        var pass = $('#pass').val();
        if(pass == "") {
            var passmsg = $('#passmsg').html('请输密码').css('color','red');
            return false;
        }
        // 定义正则 (6~18位必须以字母开头,只能包括字母、数字、下划线)
        var reg =  /^[a-zA-Z]\w{5,17}$/;
        // 验证 匹配正则
        var flag = reg.test(pass);
        if (flag){
            //验证成功
            var passmsg = $('#passmsg').html('格式正确').css('color','');
        }else {
            //验证失败
            var passmsg = $('#passmsg').html('格式不正确').css('color','red');
            return false;
        } 
    }

    // 验证确认密码 只判断俩次密码是否一致并加上提示信息
    function blurRepwd(){
        var pass = $('#pass').val();
        var repass = $('#repass').val();
        if(pass != repass) {
            var repassmsg = $('#repassmsg').html('俩次密码不一致').css('color','red');
            return false;
        }
        if(repass != "" && repass == pass) {
            var repassmsg = $('#repassmsg').html('俩次密码一致').css('color','');
        }
    }

    // 验证头像上传
    /*
        change()方法
        当元素的值发生改变时，会发生 change 事件。
        该事件仅适用于文本域（text field）,以及 textarea 和 select 元素。
    */
    function blurfileName(){
        // console.log($(this).val());    获取到的是完整的文件路径值;C:\fakepath\u=3137872250,621647835&fm=26&gp=0.jpg
        $('#fileName').change(function(e){
            console.log(e)
            /*
                简单的获取选择文件的名字
                currentTarget:获取到的是绑定事件的对象
                e.currentTarget.files 是一个数组，如果支持多个文件，则需要遍历
            */
            var fileMsg = e.currentTarget.files;
            console.log(fileMsg)
            var fileName = fileMsg[0].name;
            // 图片名称
            console.log(fileName);//js-dom.png
            // 图片大小
            var fileSize = fileMsg[0].size; //console.log(fileSize);3655k
            console.log(fileSize)
            // 判断图片大小是否超过4kb
            if (fileSize >= 39999) {
                 var fileNameMsg = $('#fileNameMsg').html('请上传40kb以内的图片').css('color','red')
                 return false;
            }
            // 图片类型
            var fileType = fileMsg[0].type; //判断文件类型
            console.log(fileType); // iamge/jpg
             var type=(fileType.substr(fileType.lastIndexOf("/"))).toLowerCase();
            console.log(type)
            if(type!="/jpg"&&type!="/gif"&&type!="/jpeg"&& type!="/png"){
                var fileNameMsg = $('#fileNameMsg').html('您上传图片的类型不符合(.jpg |.jpeg |.gif |.png)!').css('color','red')
                 return false;
            } else {
                var fileNameMsg = $('#fileNameMsg').html('头像可用').css('color','')
            }
        });
    }
    
</script>

图片展示