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('全部通过')
}
}
}
})
未填写邮箱
【运行结果】没有达到期望结果,如下图
方案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('验证通过')
}
}
}
})
未填写邮箱
【运行结果】达到期望结果,如下图
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的后续版本会考虑此情况
欢迎指正
java 表单验证必填的_avalon2 非必填项的表单验证规则相关推荐
- php邮箱必填,WordPress移除用户新注册时邮件必填选项(注册不填邮箱/邮箱非必填)...
使用WordPress搭建的网站是支持用户注册做商城网站的,注册的时候默认要求用户填写一个邮箱,并且是必须填写的,而某些网站情况特殊,可能并不需要强制填写邮件,所以我们可以通过下面的代码把强制填写邮件 ...
- java非必填字段跳过校验,avalon2表单验证,非必填字段在不填写的时候不能通过验证...
avalon2表单验证,非必填字段在不填写的时候不能通过验证 代码 var vm = avalon.define({ $id: "validate1", aaa : "& ...
- 验证必须是数字php,Element 中表单非必填数据项 必须为数字的验证问题
Element-ui 的el-form组建中,自带基本的验证功能,比如某些项必填的验证,直接加入rules 规则中即可,如下实例: 在页面中书写如下: 在vue 初始化data中 filterForm ...
- Java EE WEB工程师培训-JDBC+Servlet+JSP整合开发之13.Form表单处理(1)
–Form 表单简介 –创建并提交表单 –使用Servlet处理表单 • 读取单个请求参数 • 读取多个表单 • 读取所有参数名称 –实例 • 注册会员 ###############Michael分 ...
- html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...
- 详解element-ui设置下拉选择切换必填和非必填
<template><div><el-form:model="ruleForm":rules="rules"ref="r ...
- 小程序提交表单mysql_GitHub - kun19911227/minipro: 微信小程序提交带图片的表单
minipro 微信小程序提交带图片的表单 目录说明 upload_images ├── pages │ ├── upload_info 提交表单 │ └── display_info 信息展示 ├─ ...
- 怎么改变表单option标签直接字体大小_不起眼却非常重要的表单交互
表单是什么?是用户和app之间的对话.作为人机交互的一种重要入口,一个好的数据输入方式是很有必要去考虑的.但现实中,我们大多设计师和产品经理前期设计的时候就没有太多的考虑,到最后开发的时候就会发现问题 ...
- form表单中根据值判断是否disabled_Java 0基础入门 (Html表单、表单元素)
上一篇:Java 0基础入门 (Html标签的使用) 表单在网页中主要负责数据采集功能. 一.表单实际应用场景 百度搜索 5173注册 如上两张图,图中的黑色线条是我画上去的,如果按照黑线,在Excl ...
- DBA必知的170张Oracle常用动态性能表介绍
DBA必知的170张Oracle常用动态性能表介绍 常用动态性能表.pdf 附录C 动态性能(V$)视图 本附录介绍动态性能视图.这些视图一般作为V$视图引用.本附录包括下列内容: ???? 动态性 ...
最新文章
- Android开发之EditText监听软键盘清除(输入是否清除)
- 【华为云技术分享】当我们在谈论卡片时,我们到底在谈论什么?
- linux使用gcc编译报错“undefined reference to `pthread_create'”
- JavaScript入门之Canvas(一): 2D Context
- 电容屏和电阻屏的区别
- 缓和曲线——回旋曲线的计算
- 计算机网络vtp,VTP学习笔记(二)
- AtCoder Beginner Contest 178 C
- C语言:memcmp()---字符串比较
- 一键批量下载皮皮虾视频
- react中使用swiper
- window10 男装linux,男人帮男装购物app-男人帮手机版下载v2.3.5-Linux公社
- 【658. 找到 K 个最接近的元素】
- 华为机试题(Python)
- 傅里叶变换究竟是什么玩意儿 以及 这些公式究竟是怎么来的 引子
- 《那一夜》———孙溟㠭书画
- 面试篇---大四实习面试经历,总结一下自己的面试过程(函渠道、面试题、面试经验)
- android 语音提醒,文字转语音播放
- ModuleNotFoundError: No module named ‘model‘
- [论文笔记] In-Memory Fuzzing for Binary Code Similarity Analysis