vue 表单验证工作实线总结

前提条件：设置好表单及验证规则，以及各个formItem的属性，例如：

一、表单定义ref和rules:
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">

二、表单元素：定义好prop，此名与rules中定义一致

<FormItem label="同意授信金额"  prop="final_creditsum">
  <Input placeholder="输入最多支持4位小数" v-model="formValidate.final_creditsum"  number >
    <span slot="append">万元</span>
  </Input>
</FormItem>

三、定义好验正规则：

ruleValidate: {
  // 授信金额
  final_creditsum: [
    { type: 'number',required: true, message: '输入整数或小数！', trigger: 'blur' }
  ],
  // 担保年费率
  guar_costrate: [
    { type: 'number',required: true, message: '输入整数或小数！', trigger: 'blur' }
  ],
  // 下一步办理人
  man_id: [
    {type: 'string', required: true, message: '下一步骤办理人不能为空！', trigger: 'blur' }
  ],
  // 反担保方式多选
  modelOptGuaraType: [
    { type: 'array', required: true, message: '反担保方式不能为空！', trigger: 'change' }
  ],
  // 反担保措施
  opt_guara_descr: [
    { required: true, message: '反担保措施不能为空！', trigger: 'blur' },
    { max: 2000, message: '长度不能超过2000字符！', trigger: 'blur' }
  ]
}// end ruleValidate

验证规则总结：

1.金额数字：可以输入整数或者小数，且必填项：注意域和规则均要定义为number.

<FormItem label="同意授信金额"  prop="final_creditsum">
  <Input placeholder="输入最多支持4位小数" v-model="formValidate.final_creditsum"  number >
    <span slot="append">万元</span>
  </Input>
</FormItem>

// 授信金额
final_creditsum: [
  { type: 'number',required: true, message: '输入整数或小数！', trigger: 'blur' }
],

2. 字符串类型：

{ required: true, message: '反担保措施不能为空！', trigger: 'blur' },
{ max: 2000, message: '长度不能超过2000字符！', trigger: 'blur' }

3.下拉框多选，本质是一个数组：

{ type: 'array', required: true, message: '反担保方式不能为空！', trigger: 'change' }

4.日期类型

{ type: 'date', required: true, message: '出生日期不能为空且必须为日期格式！', trigger: 'change' }

5.整数