1. 支持的基本类型

  1. <FormItem
  2.      prop="UserId"
  3.           :rules=" [
  4.               { required: true, message: '请选择一项', trigger: 'change',type:'number',min:1},
  5.           ]"
  6.   >
  7.        <Select v-model="formAddOrder.UserId" filterable @on-change="selectUser">
  8.                 <Option v-for="(item,index) in userList" :value="item.UserId" :label="item.name" :key="index" >
  9.                       <span>{{item.name}}</span>             
  10.                   </Option>
  11.        </Select>
  12.  </FormItem>

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:

验证字段是否存在其中

  1. { message:'不包含a , u, g',trigger: 'change',type: 'enum',enum: ['a', 'u', 'g']}

messages:

错误信息

trigger :

‘change’ | ‘blur’

whitespace :

true | false
true:空白字符 ->错误提醒
false: 空白字符->不报错

  1. { type: 'string', whitespace:true,message:'包含空白字符',trigger: 'change'}

2.验证数字踩坑

表单校验，单独进行数字校验，使用下面的代码是可以的

  1. { type: 'number', message: '请输入排序', trigger: 'blur' }

但同时进行数字和为空校验，使用下面的代码是不行的，输入数字的时候一直提示不能为空

  1. { required: true, message: '排序不能为空', trigger: 'blur' },
  2. { type: 'number', message: '请输入排序', trigger: 'blur' }

能够成功验证的方法：

  1. const validateSequence = (rule, value, callback) => {
  2.      let regNum = /^.{1,5}$/;
  3.      if (value === '') {
  4.            callback(new Error('输入排序(升序)'));
  5.      } else if (!Number.isInteger(+value)) {
  6.            callback(new Error('输入数字'));
  7.      } else if (!regNum.test(value)) {
  8.            callback(new Error('长度过长'));
  9.      } else {
  10.            callback();
  11.      }
  12. };
  13. ruleData: {
  14.      sequence: [
  15.            { required: true, validator: validateSequence, trigger: 'blur' }
  16.      ]
  17. }

3.view进行表单验证select时候验证失败的问题：

用iview自带的表单验证select标签的时候，一直验证不通过，因为iview默认校验数据类型为String，而我的select用的value是number类型的

  1. ruleValidate: {
  2.   customer:[
  3.     { required: true, message: '客户名称不能为空', trigger: 'blur',type:'number'},
  4.   ],
  5. }

4.iview进行表单验证时间日期验证失败的问题：

和下拉框一样，日期的类型是data

  1. ruleValidate: {
  2.   advance:[
  3.     { required: true, message: '预送达时间不能为空', trigger: 'change' ,type: 'date'},
  4.   ],
  5. }

5.iview进行多重验证的写法：

多重验证包括第一要验不能为空，第二要验证限制的一些长度，写正则表达式等

  1. ruleValidate: {
  2.   goodsNum: [
  3.     { required: true, message: '数量不能为空', trigger: 'blur' },
  4.     { type: 'string',pattern:/^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/, message:'数量应为正浮点数且不超过9999.99', trigger:'blur'},
  5.   ],
  6. }

6. 有时在Select选项需要给个默认选项时，必须在data中传入string类型，如果是number则无法默认选中。

  1. <Form-item label="个人/企业标识" prop="personalOrEnterprise">
  2.                  <Select v-model="personalOrEnterprise" placeholder="请选择" :disabled="checkEnterprise">
  3.                                <Option value="1">个人</Option>
  4.                                <Option value="2">企业</Option>
  5.                  </Select>
  6. </Form-item>
  7. data() {
  8.  return {
  9.     personalOrEnterprise: '1'  //默认为个人
  10.  }
  11. }

7.记录踩过的坑

input 默认输入为String类型
如果在表单验证中声明 type：number，建议input中加上number属性，将用户的输入自动转换为 Number 类型。

select 单选多选

提示： 单选返回的是一个项，而多选返回的是数组。

dataPicker v-model失效

必须on-change返回并赋值才能实现数据绑定，否则:value无法捕捉日期的而选择变动。

8.iview表单必填的标志显示

使用iview自定义表单校验时，对于v-if显示状态的修改会影响的显示

使用v-if设置在新增时密码字段显示，编辑时不显示
这时校验规则已完成，设置只有办公电话不是必填项
切换到编辑时，密码字段消失，但是办公电话前会出现*

  1. <FormItem v-if="modalType===0" label="密码" prop="password">
  2.    <Input type="password" v-model="userForm.password" autocomplete="off"/>
  3. </FormItem>

将v-if修改为v-show，可以解决这个问题

v-if只有在条件成立时才会生成dom
v-show是先生成dom，再通过css控制显示隐藏