Jquery表單驗證

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

圖檔展示