vue 表单验证常见问题

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

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

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

// 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上直接定义验证规则

  


  
    {
    { item.dept_name }}
  

三、常见问题

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

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

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

  
    万元
  

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

4.必须为整数：

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' }

8.必须为数字

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