• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > vue教程,AngularJS教程 >  iview自定义正则验证表正文

iview自定义正则验证表单

作者:网页模板
类型:图文教程
点击次数:
发布时间:2019-07-30 16:39
分享到:
    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('提交成功'));
            }
        })
    }
}
(责任编辑:网页模板)
  • 本文标签:
  • iview表单
子组件更改props的值,报错
iview Upload组件多个文件上传,阻止iview自带的上传事件