发表于: 2019-10-04 23:38:31
1 760
今天完成的事:
进行任务6-10
明天计划的事:
继续任务6-10
遇到的问题:
暂无
收获:
了解了表单校验
需要先安装校验插件
npm install vee-validate@2.0.0-rc.25
表单校验是浏览器原生支持的,但是有的时候用不同的浏览器处理起来需要一些小技巧。即使当表单校验已经被完美支持,你也还是有很多时候需要进行自定义的校验。
内置的校验规则
after{target} - 比target要大的一个合法日期,格式(DD/MM/YYYY)
alpha - 只包含英文字符
alpha_dash - 可以包含英文、数字、下划线、破折号
alpha_num - 可以包含英文和数字
before:{target} - 和after相反
between:{min},{max} - 在min和max之间的数字
confirmed:{target} - 必须和target一样
date_between:{min,max} - 日期在min和max之间
date_format:{format} - 合法的format格式化日期
decimal:{decimals?} - 数字,而且是decimals进制
digits:{length} - 长度为length的数字
dimensions:{width},{height} - 符合宽高规定的图片
email - 不解释
ext:[extensions] - 后缀名
image - 图片
in:[list] - 包含在数组list内的值
ip - ipv4地址
max:{length} - 最大长度为length的字符
mimes:[list] - 文件类型
min - max相反
mot_in - in相反
numeric - 只允许数字
regex:{pattern} - 值必须符合正则pattern
required - 不解释
size:{kb} - 文件大小不超过
url:{domain?} - (指定域名的)url
指令说明
v-verify
v-erify 在表单控件元素上创建数据的验证规则,他会自动匹配要验证的值以及验证的规则。
v-verify 修饰符说明
该指令最后一个修饰符为自定义分组
v-verified
v-verified 错误展示,当有错误时会展示,没有错误时会加上style:none,默认会展示该数据所有错误的第一条
修饰符说明
.join 展示所有错误 用逗号隔开
可自定义校验规则
评论