1.1 校验表单
Q1:表设置类型type
为数字型number
,结果验证不通过
代码如下
原因:普通input
输入的值,视为字符串,所以导致不匹配
<a-form-item label="缴费金额">
<a-input
placeholder="请输入缴费金额"
style="width: 20%"
v-decorator="[
'amount',
{
rules: [
{
required: true,
type: 'number',
message: '请输入缴费金额'
}
]
}
]"
/>
</a-form-item>
错误截图:
解决方案:加入内置类型转换函数
transform(value) {
return Number(value)
}
<a-form-item label="缴费金额">
<a-input
placeholder="请输入缴费金额"
style="width: 20%"
v-decorator="[
'amount',
{
rules: [
{
required: true,
type: 'number',
message: '请输入缴费金额',
transform(value) {
return Number(value)
}
}
]
}
]"
/>
</a-form-item>
Q2:常用规则的参数
type
要使用的验证程序的类型,识别的类型值如下:
string
: 必须是String
类型。这是默认类型。number
: 必须是Number
类型。boolean
: 必须是Boolean
类型。method
: 必须是Function
类型。regexp
: 必须是RegExp
的实例或在创建新 RegExp 时不生成异常的字符串。integer
: 必须是Number
和整数类型。float
: 必须是Number
和浮点数类型。array
: 必须是由array.isarray
确定的数组。object
: 必须是Object
类型,而不是Array.IsArray
类型。enum
: 值必须存在于枚举中。date
: 必须是 Date 类型。url
: 必须是url类型。hex
: 必须是十六进制类型。email
: 必须是电子邮件类型。Required:是否必填
boolean,是否必填
例:必须输入:required: true
Pattern:正则验证
模式规则属性表示正则表达式,该值必须匹配才能通过验证。
这个是属于精华,后面补充Range:长度范围或者大小范围
使用min
和max
属性定义范围。对于字符串和数组类型,将根据长度进行比较,对于数字类型,数字不得小于min
,也不得大于max
。
例:
字符串,限定长度:type: 'string', min: 6, max: 12
数字,限定大小:type: 'number', min: 100, max: 500, transform(value) { return Number(value) }
,这里注意:需要使用transform
转换类型,否则可能会导致失败Length:指定长度
验证字段的确切长度。对于字符串和数组类型,对length
属性执行比较,对于数字类型,此属性指示数字的完全匹配,即,它可能仅严格等于len
。如果len
属性与最小和最大范围属性组合,则len
优先。
例:指定长度:len: 8
Enumerable:只能是指定几项
枚举,要从可能值列表中验证值,请使用带有枚举属性的枚举类型,列出该字段的有效值。var descriptor = {
role: { type: "enum", enum: ['admin', 'user', 'guest'] }
}
Whitespace:允许空白值通过
空白,通常将仅包含空格的必填字段视为错误。要为仅包含空格的字符串添加其他测试,请将空白属性添加到值为true的规则。规则必须是字符串类型。defaultField:验证数组或者对象子项目
defaultField属性可与数组或对象类型一起使用,以验证容器的所有值。它可以是包含验证规则的对象或数组。直白一点讲:就是用来验证
type
是object
和array
的子项目
中的值
例如:
var descriptor = {
urls: {
type: "array", required: true,
defaultField: {type: "url"}
}
}
Transform:值类型转换或者格式化
Q1中就用到了这个
有时需要在验证之前转换值,转换类型,可能是为了强制价值或以某种方式对其进行消毒。为此,请将验证规则添加到转换有时需要在验证之前转换一个值,可能是强制值或以某种方式对其进行清理。为此,请向验证规则添加转换函数。该属性在验证之前被转换,并重新分配给源对象,以在适当的位置改变该属性的值。
如果没有转换函数,验证将失败,因为模式不匹配,因为输入包含前导空格和尾随空格,但通过添加转换函数验证传递,同时清理字段值。
Messages:错误时输出的消息
消息,根据您的应用程序要求,您可能需要i18n支持,或者您可能更喜欢不同的验证错误消息。