模板网首页 > 建站教程 > vue教程,AngularJS教程 >  iview自定义正则验证表单正文

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('提交成功'));
            }
        })
    }
}
0
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢