摘要：場(chǎng)景描述某表單中有一個(gè)郵箱的輸入框，但是為非必填項(xiàng)，我們期望的結(jié)果不填寫(xiě)可以驗(yàn)證通過(guò)如果填寫(xiě)了郵箱驗(yàn)證郵箱格式代碼如下全部通過(guò)備用郵箱非必填提交未填寫(xiě)郵箱運(yùn)行結(jié)果沒(méi)有達(dá)到期望結(jié)果，如下圖方案重寫(xiě)驗(yàn)證規(guī)則官方有示例，可以自己重寫(xiě)一個(gè)驗(yàn)

某表單中有一個(gè)郵箱的輸入框，但是為非必填項(xiàng)，我們期望的結(jié)果
1. 不填寫(xiě)可以驗(yàn)證通過(guò)
1. 如果填寫(xiě)了郵箱,驗(yàn)證郵箱格式

代碼如下

未填寫(xiě)郵箱
【運(yùn)行結(jié)果】沒(méi)有達(dá)到期望結(jié)果，如下圖

官方有示例，可以自己重寫(xiě)一個(gè)驗(yàn)證規(guī)則

代碼如下

未填寫(xiě)郵箱
【運(yùn)行結(jié)果】達(dá)到期望結(jié)果，如下圖

avalon內(nèi)置驗(yàn)證規(guī)則重寫(xiě),如下

function isRegExp(value) {
    return avalon.type(value) === "regexp"
}
var rmail = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/i
var rurl = /^(ftp|http|https)://(w+:{0,1}w*@)?(S+)(:[0-9]+)?(/|/([w#!:.?+=&%@!-/]))?$/
function isCorrectDate(value) {
    if (typeof value === "string" && value) { //是字符串但不能是空字符
        var arr = value.split("-") //可以被-切成3份，并且第1個(gè)是4個(gè)字符
        if (arr.length === 3 && arr[0].length === 4) {
            var year = ~~arr[0] //全部轉(zhuǎn)換為非負(fù)整數(shù)
            var month = ~~arr[1] - 1
            var date = ~~arr[2]
            var d = new Date(year, month, date)
            return d.getFullYear() === year && d.getMonth() === month && d.getDate() === date
        }
    }
    return false
}
avalon.shadowCopy(avalon.validators, {
    pattern: {
        message: "必須匹配{{pattern}}這樣的格式",
        get: function (value, field, next) {
            var elem = field.dom 
            var data = field.data
            if (!isRegExp(data.pattern)) {
                var h5pattern = elem.getAttribute("pattern")
                data.pattern = new RegExp("^(?:" + h5pattern + ")$")
            }
            next(value === "" || data.pattern.test(value))
            return value
        }
    },
    digits: {
        message: "必須整數(shù)",
        get: function (value, field, next) {//整數(shù)
            next(value === "" || /^-?d+$/.test(value))
            return value
        }
    },
    number: {
        message: "必須數(shù)字",
        get: function (value, field, next) {//數(shù)值
            next(value === "" || isFinite(value))
            return value
        }
    },
    date: {
        message: "日期格式不正確",
        get: function (value, field, next) {
            var data = field.data
            if (isRegExp(data.date)) {
                next(value === "" || data.date.test(value))
            } else {
                next(value === "" || isCorrectDate(value))
            }
            return value
        }
    },
    url: {
        message: "URL格式不正確",
        get: function (value, field, next) {
            next(value === "" || rurl.test(value))
            return value
        }
    },
    email: {
        message: "email格式不正確",
        get: function (value, field, next) {
            next(value === "" || rmail.test(value))
            return value
        }
    },
    minlength: {
        message: "最少輸入{{minlength}}個(gè)字",
        get: function (value, field, next) {
            var num = parseInt(field.data.minlength, 10)
            next(value === "" || (value.length >= num))
            return value
        }
    },
    min: {
        message: "輸入值不能小于{{min}}",
        get: function (value, field, next) {
            var num = parseInt(field.data.min, 10)
            next(value === "" || (parseFloat(value) >= num))
            return value
        }
    },
    max: {
        message: "輸入值不能大于{{max}}",
        get: function (value, field, next) {
            var num = parseInt(field.data.max, 10)
            next(value === "" || (parseFloat(value) <= num))
            return value
        }
    },
    chs: {
        message: "必須是中文字符",
        get: function (value, field, next) {
            next(value === "" || /^[u4e00-u9fa5]+$/.test(value))
            return value
        }
    }
})

如果不想重寫(xiě)驗(yàn)證規(guī)則
修改源碼 avalon/src/directives/duplex/addValidateField.js
添加2行代碼,打包
運(yùn)行后結(jié)果達(dá)到預(yù)期

if (rules["required"] === undefined || rules["required"] === false)
    field.norequired = true;

如下圖

說(shuō)明:

這2行代碼是指 在"ms-rules"中沒(méi)有配置必填項(xiàng)"required"規(guī)則或"required"設(shè)置為false時(shí),
設(shè)置該field為非必填,field.norequired為true

在源碼 avalon/src/directives/duplex/addValidateField.js  中有這么一段代碼

                if (field.norequired && value === "") {
                    a = true
                }

如下圖紅框

此方案我自測(cè)是沒(méi)問(wèn)題的，但不知是否全面，希望avalon的后續(xù)版本會(huì)考慮此情況
歡迎指正