Tag: validation

Issue with Laravel Rules & Regex (OR) operator

Posted by – August 20, 2014

換了新工作後才開始接觸 Laravel 這套 PHP framework,學習的過程碰到不少問題,跟之前慣用的 CodeIgniter 相比,Laravel 引了很多新觀念。

這天在使用 Laravel 內建的 Validation 作表單檢查的時候,發現 regex 規則怎麼寫都不會過..... (怒

規則如下:

<?php

$rule = array(

    'mode' => 'required|regex:/^(typeA|typeB)$/'

);

執行時會一直收到如下的錯誤訊息...

ErrorException
preg_match(): No ending delimiter '\/' found

苦惱了十分鐘後才在文件上看到這段話...

Note: When using the regex pattern, it may be necessary to specify rules in an array instead of using pipe delimiters, especially if the regular expression contains a pipe character.

因為 pipe (|) 衝突的關係... WTF...

所以要改寫成 array 的形式

<?php

$rule = array(

    'mode' => array('required', 'regex:/^(typeA|typeB)$/')

);

搞定。

File type validation with Javascript

Posted by – October 1, 2012

前些時候寫的簡單版測試程式,在表單送出前用 JavaScript 檢查檔案副檔名。當然這只是第一步驗證,在 PHP 端還是要對 Content Type 做一次檢查。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>File Type Validation in JavaScript. ver 0.1</title>
    </head>
<body>

<form method="post" enctype="multipart/form-data" onsubmit="return checkAllFile();";>
    <input class="file-selector" type="file" name="userfile1" size="20"/></br>
    <input class="file-selector" type="file" name="userfile2" size="20"/></br>
    <input class="file-selector" type="file" name="userfile3" size="20"/></br>
    <input class="file-selector" type="file" name="userfile4" size="20"/></br>
    <input class="file-selector" type="file" name="userfile5" size="20"/></br>
    <input type="submit" value="upload"/>
</form>

<script type="text/javascript">
function checkAllFile(){
    var node_list = document.getElementsByTagName('input');
    var num_of_not_allowed_files = 0;

    for (var i = 0; i < node_list.length; i++){
        var node = node_list[i];
        if(node.getAttribute('type') == 'file'){
            var type = node.value;
            console.log(type);
            switch(type.substring(type.lastIndexOf('.') + 1).toLowerCase()){
                case 'gif': case 'jpg': case 'png':
                    //alert("an image");
                    // Do Nothing.
                    break;
                default:
                    num_of_not_allowed_files++;
                    break;
            }
        }
    }
    console.log('num_of_not_allowed_files: ' + num_of_not_allowed_files);
    if(num_of_not_allowed_files > 0){
        alert('檔案格式錯誤,只能上傳圖片哦');
        return false;
    } else return true;
}
</script>

</body>
</html>

ps. 這並不是一份最佳化過的程式碼,僅供參考。

Regular expression which matches a pattern, or is an empty string

Posted by – July 23, 2012

之前介紹過在 jQuery Validation Plugin 使用正規表達式 (Regular Expression) 的方法。

在某個專案中如常地用這個方法做表單欄位檢查,不過客戶提了一個需求,希望該欄位不是必填,但使用者有填資料時要驗證其內容。

原本的驗證條件是這樣的...

regex : "[0-9]{4}-[0-9]{6}"

也就是使用者一定要輸入正確的手機號碼,如 0919-123456。要變成選填的話... 想了一下,改成下面這樣就可以了。

regex : "([0-9]{4}-[0-9]{6})?"

前後加上括號,然後用最未端的 問號 來表示 前面這串括號裡的文字可以不出現或出現一次

jQuery Validation plugin: How to Use Regex as Rule?

Posted by – September 2, 2011

在網頁程式中,表單的處理一直是很繁瑣的一環,client 端要用 Javascript 先對使用者的輸入進行初步過濾,資料送到了 server 端還是要再過濾一次。「永遠不要信任使用者輸入的資料」是表單程式的準則。

為了網站的安全不可少的 SOP,結果便是程式設計師要為此付出許多時間撰寫過濾程式。為了減緩程式設計師的腦細胞死亡速度,借助第三方程式的功能也是很重要的課題。在網頁前端常會用 jQuery Validation plugin 來對使用者輸入的資料進行前處理,這個套件內建一些基本規則,像是必填 (required)、電子郵件 (email)、網址 (url)、數字 (digits) 等等,但偶爾還是需要自訂特殊規則。

還好 jQuery 這個套件提供開放的接口可以自訂功能,透過簡單的幾行程式就能用正規表達式 (regular expression, regex) 來指定規則。

// 建立名為 'regex' 的自訂規則
$.validator.addMethod("regex", function(value, element, param) {
     // 強制加上 ^ 與 $ 符號限制整串文字都要符合
     return value.match(new RegExp("^" + param + "$"));
});

$("#myForm").validate({
    rules: {// 定義規則
        username : {
            required: true,
            regex   : "[A-Za-z0-9]+" // 寫法請參考 Regex
        },
        onlyUppercase: {
            required: true,
            regex   : "[A-Z]+"
        }
    },
    messages: {// 自定訊息
        username : {
            required: '必填',
            regex   : '只能使用英數字'
        },
        onlyUppercase : {
            required: '必填',
            regex   : '只能使用大寫英文字母'
        }
    }
});

如此一來便能自行撰寫 regex 來設定各種進階規則以及提示文字了,即使是有多組規則也沒問題。

關於正規表達式的使用方法,請參考 石頭閒語: Regular Expression (RegExp) in JavaScript