场景形貌

某表单中有一个邮箱的输入框，然则为非必填项，我们希冀的效果
1. 不填写能够考证经由过程
1. 假如填写了邮箱,考证邮箱花样

代码以下

<script>
    var vm = avalon.define({
        $id: "validateTest",
        useremail : "",
        validate: {
            onError: function(reasons) {
                reasons.forEach(function(reason) {
                    console.log(reason.getMessage())
                })
            },
            onValidateAll: function(reasons) {
                if(reasons.length) {
                    alert(reasons[0].getMessage())
                } else {
                    alert('悉数经由过程')
                }
            }
        }
    })
</script>
<div ms-controller="validateTest">
    <form ms-validate="@validate">
        <input ms-duplex="@useremail" placeholder="备用邮箱,非必填" ms-rules='{email:true}'>
        <p><input type="submit" value="提交"/></p>
    </form>
</div>

未填写邮箱
【运转效果】没有到达希冀效果，以下图

计划1：重写考证划定规矩

官方有示例，能够本身重写一个考证划定规矩

代码以下

<script>
    avalon.validators.email = {
        message: 'email花样不正确',
        get: function(value, field, next) {
             var ok = (value === '' || /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/i.test(value))
            next(ok)
            return value
        }
    }
    var vm = avalon.define({
        $id: "validateTest",
        useremail: "",
        validate: {
            onError: function(reasons) {
                reasons.forEach(function(reason) {
                    console.log(reason.getMessage())
                })
            },
            onValidateAll: function(reasons) {
                if(reasons.length) {
                    alert(reasons[0].getMessage())
                } else {
                    alert('考证经由过程')
                }
            }
        }
    })
</script>
<div ms-controller="validateTest">
    <form ms-validate="@validate">
        <input ms-duplex="@useremail" placeholder="备用邮箱,非必填" ms-rules='{email:true}'>
        <p><input type="submit" value="提交" /></p>
    </form>
</div>

未填写邮箱
【运转效果】到达希冀效果，以下图

avalon内置考证划定规矩重写,以下

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个是4个字符
        if (arr.length === 3 && arr[0].length === 4) {
            var year = ~~arr[0] //悉数转换为非负整数
            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: '必需整数',
        get: function (value, field, next) {//整数
            next(value === '' || /^\-?\d+$/.test(value))
            return value
        }
    },
    number: {
        message: '必需数字',
        get: function (value, field, next) {//数值
            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}}个字',
        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
        }
    }
})

计划2：修正源码中addField要领

假如不想重写考证划定规矩
修正源码 avalon/src/directives/duplex/addValidateField.js
增加2行代码,打包
运转后效果到达预期

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

以下图

申明:

这2行代码是指 在'ms-rules'中没有设置必填项'required'划定规矩或'required'设置为false时,
设置该field为非必填,field.norequired为true

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

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

以下图红框

此计划我自测是没问题的，但不知是不是周全，愿望avalon的后续版本会斟酌此状况
迎接斧正