vue 表单验证常见问题

表单验证可以采用两种方式：

一、整个表单定义一个验证规则：

例如：标注为加粗的必须设置

<Form ref="formUser" :model="formUser" :rules="ruleValidate" :label-width="96">
  <FormItem label="真实姓名" prop="user_realname">
     <Input v-model.trim="formUser.user_realname" placeholder="输入您的中文姓名"/>
  </FormItem>
  <FormItem label="登录账号"  prop="user_name">
    <Input v-model.trim="formUser.user_name" placeholder="建议姓名的全拼作为登录账号"/>
  </FormItem>
</Form>

// trigger:'blur'表示验证何时触发，还可以设置trigger:'blur change',当下拉框时trigger:'change'
ruleValidate: {
  user_realname: [
    { required: true, message: '姓名不能为空！', trigger: 'blur|change' },
    { type: 'string', max: 30, message: '长度不能超过30个字符！', trigger: 'blur' }
  ],
  user_name: [
    { required: true, message: '登录账号不能为空！', trigger: 'blur|change' },
    { type: 'string', max: 30, message: '长度不能超过30个字符！', trigger: 'blur' },
    { validator: validNameExist, trigger: 'blur' }
  ],

 

二、在FormItem上直接定义验证规则

<FormItem label="担保函编号" 
            :rules="[{ required: true, message: '担保函编号不能为空！', trigger: 'blur|change' }]">
  <Input v-model="formDynamic.creditCode" placeholder="请输入" style="width: 300px;" maxlength="30" />
</FormItem>
<FormItem label="所属业务部门" 
           :rules="[{ type:'number',required: true, message: '所属业务部门不能为空！', trigger: 'change' }]">
  <Select style="width:300px" v-model="formDynamic.departid" :label-in-value="true" @on-change="getDepartItemName">
    <Option  v-for="item in departsDic" :value="item.dept_id" :key="item.dept_id">{{ item.dept_name }}</Option>
  </Select>
</FormItem>

三、常见问题

1. trigger: 'blur|change' 中的blur和change区别，blur是失去焦点才触发 ,change控件只要改变数据及失去焦点就触发，总结是文本框一般写成：trigger: 'blur|change'，下拉框写成：trigger: 'change'。

2.有时候下拉框无效，是因为iview默认校验数据类型为String，而而有时候select用的value是number类型或者日期类型date，所以应改为增加一个type，例如：

{ type:'number',required: true, message: '所属业务部门不能为空！', trigger: 'change' }

{ type:'date',required: true, message: '所属业务部门不能为空！', trigger: 'change' }

四、常用的验证总结（基于iView环境）

1.最大输入长度：直接用iView控件本身的maxlength

<Input v-model="formValidate.name" placeholder="最多40个字符" :maxlength="40" clearable ></Input>

2.输入的字符串在多少个之间或者最少不能小于多少：

3.必须为数字(支持小数位）：

<FormItem label="还款金额" prop="repaySum">
  <Input v-model="formValidate.repaySum" placeholder="请输入" number>
    <span slot="append">万元</span>
  </Input>
</FormItem>

repaySum: [
  { required: true, type: 'number', message: '还款金额数字且必填项', trigger: 'blur' }
]

4.必须为正整数：

{ type: 'string', pattern: '^[0-9]*$', message: '只能输入正整数', trigger: 'blur' }

5.带小数点的数字：

{ type: 'string', pattern: '^(([1-9]{1}\\d*)|([0]{1}))(\\.(\\d){0,4})?$', message: '输入不超过4位小数位的数字', trigger: 'blur' }

6.日期

{ type:'date',required: true, message: '所属业务部门不能为空！', trigger: 'change' }

7.多选

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