1、引入iview:
import { Card,Col, Row, Button,FormItem,Form,Table,Modal,Input,Upload} from "iview"; import 'iview/dist/styles/iview.css';或者在main.js中全局引入:
import iView from "iview"; Vue.use(iView); import 'iview/dist/styles/iview.css';2、html
<Form class="mg-top-20" ref="formInline" :model="formInline" :rules="ruleValidate"> <FormItem label="请输入数字" prop="money" :label-width="100"> <Input placeholder="请输入数字" v-model="formInline.money" /> </FormItem> <FormItem> <Button @click="handleSubmit('formInline')">保存</Button> </FormItem> </Form>注:
ref:formInline 用于最后提交获取Form表单的实例
model:formInline 用于绑定整个表单
rules:ruleValidate 用于定义的验证器
prop:money 用于表单验证与绑定属性一致
handleSubmit('formInline') 提交表单,参数传ref的值
3、在data里面,return的上方加入自定义验证规则,return里面放表单字段、验证器
data(){ const DayTimeRegex = (rule, value, callback) => { let DayTimeRegex = /^[1-9]+$/; if (value === '') { callback(new Error('内容不能为空')); } else if (!DayTimeRegex.test(value)) { callback(new Error('请输入大于0的整数')) } else { callback(); } }; return { formInline:{ money:0, } ruleValidate:{ money:[ { required: true, validator:DayTimeRegex }, //这里的validator制定了验证的规则 ], } } }4、提交表单
method:{ handleSubmit(name) { this.$refs[name].validate((valid) => { if(valid){ console.log('提交成功')); } }) } }