发表于: 2019-10-04 23:38:31

1 755


今天完成的事:

进行任务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 展示所有错误 用逗号隔开

可自定义校验规则


返回列表 返回列表
评论

    分享到