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

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

vue 表单验证常见问题相关推荐

vue 表单验证按钮事件交由父组件触发
vue 表单验证按钮事件交由父组件触发,不直接再子组件上操作的方法子组件: //内容部分 <Form ref="formCustom" :model="formC ...
写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求目标:简单易用可扩展如何简单开发者要做的写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
vue表单验证插件 vuerify
表单验证是一个网站或者系统不可或缺的,也是非常重要的一环.使用人工匹配验证的话会非常的复杂,尤其对于大量表单验证更是如此. 当然有一些jQuery 表单验证的插件,或许用着还不错.但是,如果你不想在v ...
Vue 表单验证插件的写作过程
前段时间,老大搭好了Vue的开发环境,于是我们愉快地从JQ来到了Vue.这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js. ...
vue表单验证，不能通过验证
vue表单验证一直不能通过 1.model里的值一定要和 js里面data的名称(formValidate)对应 2.rules里面的值要和js里面设定的表单规则(ruleValidate)对应 3. ...
vue表单验证，多种校验规则
前言 vue 表单验证,具体的大家根据自身项目和框架来,本文以antd举例. 实现这里以antd 举例 <template><a-form-model ref="rule ...
vue表单验证(用户名、密码、身份证号、中文姓名、手机号、邮箱)
vue表单验证(用户名.密码.身份证号.中文姓名.手机号.邮箱) new Vue({el: '#register',data: function() {// 验证邮箱let checkEmail = ...
Vue 表单验证、数据验证
graceUI js 模块 graceUI 官网 http://grace.hcoder.net 首页视频教程第一节可观看组件演示 (: 使用说明 1 将 graceChecker.js 部署到您的项 ...
vue 表单验证并提交
vue 表单验证并提交一.常用验证方式 1.data 中验证 data 数据: 2.行内验证 3.引入外部定义的规则二.表单提交时验证 1.表单的提交按钮 2.ethods 方法一.常用验证方式 ...

vue 表单验证常见问题

vue 表单验证常见问题相关推荐

最新文章

热门文章