vue 表单验证正则_iview自定义正则验证表单_vue.js教程,AngularJS教程_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！...

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

保存

注：

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

}

})

}

}