輕量級表單校驗模組（ES6）

具備哪些能力

1. 只需引入模組無需額外初始化，即可在onchange時對所有繫結data-rule="規則"屬性的表單元素觸發校驗。

2. 除內建的規則（url、email、整數和浮點數等），還允許使用者註冊新的“規則”（見register方法）。

3. 允許使用者重置“錯誤資訊的展示、errorHander、successHander”等行為（通過reset介面見下文），這樣設計是為了更靈活的與第三方css元件融合

4. 在submit時，只需手動呼叫一個方法，並給該方法指定一個“範圍”，即可得到校驗結果（範圍內的所有“輸入”是否全都有效）

總之，要校驗誰就給誰加data-rule，再簡易的配置一下規則即可。

安裝

<input type="text" name="link" placeholder="連結" data-rule="url" data-help="不能為空" required>

import form from `./form.js`
import $ from `jquery`;

初始化完畢~，以上input在value改變時即可觸發內建的url格式校驗。

屬性

@data-rule ^*

必選項，只有包含data-rule屬性的表單元素才會被校驗。支援兩種寫法：

1. data-rule=”型別”

2. data-rule=”型別|表示式”

關於第一種寫法，所有內建型別（共7種，見下表）都支援這麼寫。
關於第二種寫法，只有“zh，en，number，select”3種型別才支援這種寫法。表示式中允許出現3個屬性：size、decimal、type（後2個只能在number型別的表示式中出現）

<input type="text" name="nickname" data-rule="zh|size:6-8">
<input type="text" name="username" data-rule="eh|size:6-8">       
<input type="text" name="total" data-rule="number|size:6-8,decimal:2-4,type:-1" > 

• szie 後面的值允許使用`-`表示範圍（6到8位中文），當然更可以只寫一個單純的數字

• decimal 是number型別的專屬，表示保留幾位小數，也可以不寫，表示不限制小數

• type 是number型別的專屬，值只能是`+1或-1`，分別表示正負數。也可以不寫，

所有型別：

型別	說明
url	連結,帶不帶協議頭均可，支援ftp(s)和http(s)
regexp	正規表示式，把值寫在pattern屬性上，模組會取這裡的值進行校驗
REG_*	通過register方法新增自定義的型別
email	郵箱
zh	中文，支援寫法2
en	英文，支援寫法2
number	數字，支援寫法2，正負數、整數和浮點數

特別說明：型別為regexp時，正規表示式需要寫在pattern屬性上。

<input type="text" name="正則校驗" data-rule="regexp" pattern="^d{1,3}$">

@data-help

選填項，錯誤時error wording從這裡取

@required

選填項，表示該input為必填項，不寫則允許空值。比如下例允許空值，但非空時會校驗輸入值是否有效：

<input type="text" name="link" placeholder="連結" data-rule="url" data-help="不能為空">

方法

@regeister(object)

註冊新的資料規則

import form from `./form.js`
import $ from `jquery`;

//新增兩種資料格式
form.register({
    REG_PASSWORD: /^[A-Z]w{5,11}$/,
    REG_NUMBER: /^d+.d{2}$/
})

@reset(type,slot)

type 字串型別，允許出現warn、errorHandler和successHander。

• warn表示重置錯誤資訊的展示方式，預設是以alert方式，可以傳入第三方的toptip或者toast外掛。

 form.reset(`warn`, $.toptip)

 //或者

 var toast = function(type) {
    return function(msg) {
        $.toast(msg, type)
    }
 }
form.reset(`warn`, toast(`forbidden`))

• errorHander 表示校驗返回失敗時執行的動作，模組內會預設給重置的slot函式傳入$input物件

 form.reset(`errorHandler`, ($input)=>{
    $input.closest(`.form-group`).addclass(`has-error`)
 }) 

以上實現了校驗失敗時，往第一個臨近當前input的.form-group元素上新增`has-error`樣式。 如果不重置，預設是新增在input上

• successHandler 表示校驗返回成功時執行的動作。用法與errorHandler相同。

注意：errorHandler和successHandler的重置是對稱的，不能只重置一個。因為如果只重置errorHanlder（把.has-error掛到.form-group上），success時，預設是從input上移除.has-error的

slot 函式型別

@validate(selector)

selector 字串型別，符合jquery語法的選擇器。校驗指定選擇器內的所有表單元素的輸入是否有效，返回true或false

完整原始碼

import $ from `jquery`;
/**
 *
 * 用法設計
 *
 * ```html
 *   <input type="text" name="link" placeholder="連結" data-rule="url" data-help="不能為空" required>
 * ```
 *
 *
 * @data-rule 表示該input應輸入的值型別,有兩種寫法
 * 1. data-rule="型別"
 * - url
 * - email
 * - zh
 * - en
 * - regexp 當設定該型別時，必須跟上pattern屬性，值為正規表示式
 * - REG_* 通過register方法註冊的自定義型別
 *
 * 2. data-rule="型別|表示式"
 *    表示式只會出現3種屬性：size、decimal、type（後兩者只用於描述number型別）
 * - "en|size:3" 表示只能輸入3位英文
 * - "zh|size:3-10" 表示允許輸入3到10位的中文
 * - "number|size:3-10,type:`+1`,decimal:2"
 *   + type 表示正數(+1)，負數(-1)，沒有type表示正負數以及0
 *   + decimal 表示小數點保留幾位，沒有decimal表示整數
 *   + size 表示位數，沒有表示不限位數
 * - "select|size:1-3" 表示允許選中幾個，一般用於checkbox的第一個
 *
 * @data-help 報錯的wording會從 data-help | placeholder 裡獲得
 *
 *
 * @required  選填屬性。不加該屬性表示該項允許空值（即非必填）
 */
let defaults = {
    //支援完整(http://www.a.com)的或者不帶協議(www.a.com)的url
    //並且協議只認http(s)和ftp(s)    
    url: /^((f|ht){1}(tp|tps)://)?([w-]+.)+[w-]+(/[w- .?%&=]*)?/,
    //@左邊只允許數字、字母、`.`和`_`
    //@右邊允許出現@sina.com.cn這樣的格式
    email: /^(w)+(.w+)*@(w)+((.w+)+)$/,
    //純中文
    zh: /^[u4e00-u9fa5]+$/,
    //純英文
    en: /^[a-zA-Z]+$/,
    //純數字，支援正負數，浮點數，以及"1,300,268"這樣的寫法
    number: /^-?d+(.d+)?$/,
    //不包含`,~,!,@,#,$,%,^,&,*,(,),+,<,>,?,:,",{,},,/,;,`,[,]的任意字元 
    // word: /[`~!@#$%^&*()+<>?:"{}\/;`[]]/im, 
    regexp: ``,
    select: ``
};
let successClass = `has-success`;
let errorClass = `has-error`;
let patterns = defaults;
/**
 * 展示錯誤資訊
 * @param  {String}   msg    [錯誤資訊]
 * @param  {Function} theWay [預設以alert方式，可以通過暴露的reset介面重置]
 * @return {[type]}          [展示錯誤資訊]
 */
let _warn = function(msg, say = alert) {
    say(msg)
};
let _errorHandler = function($input) {
    $input.addClass(errorClass).removeClass(successClass);
};
let _successHandler = function($input) {
    $input.removeClass(errorClass).addClass(successClass);
};
/**
 * 校驗input
 * @param  {Object} $input [jq物件]
 * @return {Boolean}       [true校驗通過，false校驗失敗]
 */
let _checkIt = function($input) {
    //1、`data-rule`值為空，不校驗
    //2、`data-rule`值為`regxp`，但`pattern`為空，不校驗
    //3、 必填項為空值時，直接提示（不再進行parseRule）
    //4、非比填項允許為空值
    //5、data-rule和input value都不為空時，不管有沒required都得校驗
    if (!$input.data(`rule`) || ($input.data(`rule`) == `regexp` && !$input.prop(`pattern`))) {
        return false
    } else if (!$input.val() && $input.prop(`required`)) {
        return false
    } else if (!$input.val() && !$input.prop(`required`)) {
        return true
    } else if ($input.val()) {
        let regxp = _parseRule($input);
        return regxp.test($input.val()) ? true : false;
    }
};
/**
 * 解析data-rule
 * @param  {Object} $input [jq物件]
 * @return {Object}        [返回一個正規表示式物件（如果是`select|3-10`型別的會返回位數）]
 */
let _parseRule = function($input) {
    let rule = $input.data(`rule`).trim().toLowerCase();
    let type = rule.match(/^(w+)(|[w|W]+)?/)[1];
    let pattern;
    //判斷type是否存在 》屬於哪種rule型別 》對第二種型別進一步分類解析
    if (!patterns.hasOwnProperty(type)) {
        throw type + ` is not registered`
    } else if (/^w+$/.test(rule)) {
        if (type == `regexp`) {
            pattern = new RegExp($input.prop(`pattern`));
        } else {
            pattern = patterns[type];
        }
    } else if (/^w+|[w|W]+/.test(rule)) {
        // `size:1-10,decimal:1-2,type:+1`            
        let exp = rule.slice(type.length + 1); //需要扣除掉`|``
        let obj = {};
        exp.split(`,`).forEach((item) => {
            obj[item.split(`:`)[0]] = item.split(`:`)[1]
        })
        if (type == `number`) {
            if (obj[`size`] && !obj.hasOwnProperty(`decimal`) && !obj.hasOwnProperty(`type`)) {
                // /^-?d{1,3}$/  限定位數的整數
                pattern = new RegExp(`^-?\d{` + obj[`size`].replace(`-`, `,`) + `}$`);
            } else if (obj[`size`] && obj[`type`] == `+1` && !obj.hasOwnProperty(`decimal`)) {
                // /^d{1,3}$/  限定位數的正整數
                pattern = new RegExp(`^\d{` + obj[`size`].replace(`-`, `,`) + `}$`);
            } else if (obj[`size`] && obj[`type`] == `-1` && !obj.hasOwnProperty(`decimal`)) {
                // /^-d{1,3}$/  限定位數的負整數
                pattern = new RegExp(`^-\d{` + obj[`size`].replace(`-`, `,`) + `}$`);
            } else if (obj[`type`] == `+1` && !obj.hasOwnProperty(`size`) && !obj.hasOwnProperty(`decimal`)) {
                // /^d+$/  不限定位數的正整數
                pattern = new RegExp(`^\d+$`);
            } else if (obj[`type`] == `-1` && !obj.hasOwnProperty(`size`) && !obj.hasOwnProperty(`decimal`)) {
                // /^-d+$/  不限定位數的負整數
                pattern = new RegExp(`^-\d+$`);
            } else if (obj[`decimal`] && !obj.hasOwnProperty(`size`) && !obj.hasOwnProperty(`type`)) {
                // /^-?d+.d{1,3}$/  浮點數（正負均可），只定小數點的
                pattern = new RegExp(`^-?\d+\.\d{` + obj[`decimal`].replace(`-`, `,`) + `}$`);
            } else if (!obj.hasOwnProperty(`size`) && obj[`type`] == `+1` && obj[`decimal`]) {
                // /^d+.d{1,3}$/  正浮點數，只定小數點的
                pattern = new RegExp(`^\d+\.\d{` + obj[`decimal`].replace(`-`, `,`) + `}$`);
            } else if (!obj.hasOwnProperty(`size`) && obj[`type`] == `-1` && obj[`decimal`]) {
                // /^-d+.d{1,3}$/  負浮點數，只定小數點的
                pattern = new RegExp(`^-\d+\.\d{` + obj[`decimal`].replace(`-`, `,`) + `}$`);
            } else if (obj[`size`] && !obj.hasOwnProperty(`type`) && obj[`decimal`]) {
                // /^-?d+.d{1,3}$/  浮點數（正負均可），整數部分和小數部分均限定
                pattern = new RegExp(`^-?\d{` + obj[`size`].replace(`-`, `,`) + `}\.\d{` + obj[`decimal`].replace(`-`, `,`) + `}$`);
            } else if (obj[`size`] && obj[`type`] == `+1` && obj[`decimal`]) {
                // /^d{1,3}.d{1,3}$/  正浮點數，整數部分和小數部分均限定
                pattern = new RegExp(`^d{` + obj[`size`].replace(`-`, `,`) + `}\.\d{` + obj[`decimal`].replace(`-`, `,`) + `}$`);
            } else if (obj[`size`] && obj[`type`] == `-1` && obj[`decimal`]) {
                // /^-d{1,3}.d{1,3}$/  負浮點數，整數部分和小數部分均限定
                pattern = new RegExp(`^-\d{` + obj[`size`].replace(`-`, `,`) + `}\.\d{` + obj[`decimal`].replace(`-`, `,`) + `}$`);
            }
        } else if (type == `zh`) {
            //砍掉尾巴2位(`+$``),然後拼接{form,to}       
            pattern = new RegExp(`^[\u4e00-\u9fa5]{` + obj[`size`].replace(`-`, `,`) + `}$`);
        } else if (type == `en`) {
            pattern = new RegExp(`^[a-zA-Z]{` + obj[`size`].replace(`-`, `,`) + `}$`)
        } else if (type == `select`) {
            pattern = obj[`size`];
        }
    } else {
        throw rule + ` is wrong.`;
    }
    return pattern
};
// blur校驗input value
$(document).on(`change`, `:input[data-rule]`, function(event) {
    if ($(this).type == `checkbox` || $(this).type == `radio`) return
    if (_checkIt($(this))) {
        _successHandler($(this));
    } else {
        _warn($(this).data(`help`) || $(this).prop(`placeholder`) || `格式錯誤`);
        _errorHandler($(this));
    }
})
export default {
    /**
     * 校驗指定範圍內的所有表單元素的輸入是否有效
     * @param  {String} selector [description]
     * @return {Boolean}         [返回true或false]
     */
    validate(selector) {
            let isValid;
            $(selector).find(`:input[data-rule]`).each(function() {
                if (_checkIt($(this))) {
                    _successHandler($(this));
                    isValid = true;
                } else {
                    _warn($(this).data(`help`) || $(this).prop(`placeholder`) || `格式錯誤`);
                    _errorHandler($(this));
                    isValid = false;
                    return false
                }
            })
            return isValid;
        },
        /**
         * 註冊一個新的校驗型別
         * @param  {Object} object {type:`REG_NAME`,pattern:正規表示式}
         * @return {[type]} 往預設的defaults物件裡新增新的鍵值對
         */
        register(object) {
            $.each(object, function(key, val) {
                if (!/^REG_/i.test(key)) {
                    throw object.type + ` is invalid name.it must start with "REG_"`
                }
                //預設屬性放後頭，確保不會被新註冊的覆蓋    
                $.extend(patterns, {
                    [key.toLowerCase()]: val
                }, defaults);
            })
        },
        /**
         * 暴露出來的重置介面
         * @param  {String}     type [`warn|errorHandler|successHandler`,warn表示展示錯誤資訊；errorHander表示錯誤時執行的操作]
         * @param  {Function}   slot [函式或字串]
         * @return                   [重置內部的方法]
         */
        reset(type, slot) {
            if (type == `warn`) {
                _warn = slot;
            } else if (type == `errorHandler`) {
                _errorHandler = slot;
            } else if (type == `successHandler`) {
                _successHandler = slot;
            } else {
                throw type + ` is not invalid type`
            }
        }
}

github地址

參考

weui.js – form模組