iview 表单验证的规则总结
type :
string: 必须是字符串类型。这是默认类型
number: 必须是数字
boolean: 必须是布尔型的
method:必须是类型函数
regexp: 必须是ReGEXP的实例,或者是在创建新的ReGEXP时不会生成异常的字符串
integer:必须是整数.
float:必须是浮点数.
array: 必须是由Array.isArray确定的数组
object: 必须是类型对象而不是Array.isArray
enum: 枚举中必须存在值。
date: 按日期确定的值必须有效
url: 必须是URL类型。
hex: 必须是十六进制。
email:必须是电子邮件类型。
required:true | false
pattern :正则表达式
min: 最小值
max: 最大值
Length : 长度
enum: 验证字段是否存在其中
{ message:'不包含a , u, g',trigger: 'change',type: 'enum',enum: ['a', 'u', 'g']}
messages: 错误信息
trigger : ‘change’ | ‘blur’
whitespace : true | false
true:空白字符 ->错误提醒
false: 空白字符->不报错
验证数字踩坑
表单校验,单独进行数字校验,使用下面的代码是可以的
{ type: 'number', message: '请输入排序', trigger: 'blur' }
但同时进行数字和为空校验,使用下面的代码是不行的,输入数字的时候一直提示不能为空
{ required: true, message: '排序不能为空', trigger: 'blur' }, { type: 'number', message: '请输入排序', trigger: 'blur' }
能够成功验证的方法:
const validateSequence = (rule, value, callback) => { let regNum = /^.{1,5}$/; if (value === '') { callback(new Error('输入排序(升序)')); } else if (!Number.isInteger(+value)) { callback(new Error('输入数字')); } else if (!regNum.test(value)) { callback(new Error('长度过长')); } else { callback(); } };
ruleData: { sequence: [ { required: true, validator: validateSequence, trigger: 'blur' } ] }
iview进行表单验证时间日期验证失败的问题:
和下拉框一样,日期的类型是data
ruleValidate: { advance:[ { required: true, message: '预送达时间不能为空', trigger: 'change' ,type: 'date'}, ], }
iview进行多重验证的写法:
多重验证包括第一要验不能为空,第二要验证限制的一些长度,写正则表达式等
ruleValidate: { goodsNum: [ { required: true, message: '数量不能为空', trigger: 'blur' }, { type: 'string',pattern:/^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/, message:'数量应为正浮点数且不超过9999.99', trigger:'blur'}, ], }
有时在Select选项需要给个默认选项时,必须在data中传入string类型,如果是number则无法默认选中。
<Form-item label="个人/企业标识" prop="personalOrEnterprise"> <Select v-model="personalOrEnterprise" placeholder="请选择" :disabled="checkEnterprise"> <Option value="1">个人</Option> <Option value="2">企业</Option> </Select> </Form-item>
data() { return { personalOrEnterprise: '1' //默认为个人 } }
记录踩过的坑
input 默认输入为String类型
如果在表单验证中声明 type:number,建议input中加上number属性,将用户的输入自动转换为 Number 类型。
select 单选多选
提示: 单选返回的是一个项,而多选返回的是数组。
dataPicker v-model失效
必须on-change返回并赋值才能实现数据绑定,否则:value无法捕捉日期的而选择变动。
8.iview表单必填的标志显示
使用iview自定义表单校验时,对于v-if显示状态的修改会影响的显示
使用v-if设置在新增是密码字段显示,编辑时不显示
这时校验规则已完成,设置只有办公电话不是必填项
切换到编辑时,密码字段消失,但是办公电话前会出现*
<FormItem v-if="modalType===0" label="密码" prop="password"> <Input type="password" v-model="userForm.password" autocomplete="off"/> </FormItem>
将v-if修改为v-show,可以解决这个问题
v-if只有在条件成立时才会生成dom
v-show是先生成dom,再通过css控制显示隐藏