java 表单验证必填的_avalon2 非必填项的表单验证规则

场景描述

某表单中有一个邮箱的输入框,但是为非必填项,我们期望的结果

1. 不填写可以验证通过

1. 如果填写了邮箱,验证邮箱格式

代码如下

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('全部通过')

}

}

}

})

未填写邮箱

【运行结果】没有达到期望结果,如下图

ca52407deac9aa35c99592a24ef263f2.png

方案1:重写验证规则

官方有示例,可以自己重写一个验证规则

代码如下

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('验证通过')

}

}

}

})

未填写邮箱

【运行结果】达到期望结果,如下图

5cd0a3eefa46005e7c8bc9db26f16d14.png

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;

如下图

6e0d0f632f02d01d9d5f27b495ae056f.png

说明:

这2行代码是指 在'ms-rules'中没有配置必填项'required'规则或'required'设置为false时,

设置该field为非必填,field.norequired为true

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

if (field.norequired && value === '') {

a = true

}

如下图红框

fc6a031dc89bb47a140da56f5b3cc04c.png

此方案我自测是没问题的,但不知是否全面,希望avalon的后续版本会考虑此情况

欢迎指正

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值