iview自定义正则验证表单

    iview验证表单利用Validator验证表单，支持正则表达式，支持自定义规则来验证表单，下面是一个iview自定义正则规则来验证正整数的小案例：

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('提交成功'));
            }
        })
    }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！