Skip to content

W
wk_add_wechat
Commit 38f67391 authored by caobo's avatar caobo
Browse files
Options

新增表单验证格式

parent 9439301b
Hide whitespace changes
Inline Side-by-side
Showing with 161 additions and 32 deletions
src/views/AddTask.vue
View file @ 38f67391
......@@ -186,7 +186,6 @@ export default class AddTask extends Vue {
const form = this.$data.addForm;
this.$refs.ruleForm.validate((valid: any) => {
if (valid) {
// console.log('验证通过了');
// 提交
// this.createPermission(form).then((data: any) => {
// this.closeDialog();
......
src/views/FilterNumber.vue
View file @ 38f67391
......@@ -38,11 +38,10 @@
class="demo-ruleForm"
>
<el-form-item label="用户组名称：" name="dsgroup" :label-width="formLabelWidth" prop='dsgroup'>
<el-input v-model="filterForm.dspgroup"
<el-input v-model="filterForm.dsgroup"
style='width:80%; margin-left:10px'
placeholder="请输入用户组名称（限20字）"
name='dspgroup'
clearable />
/>
</el-form-item>
<!-- 基础特征 -->
<div class="basic-feature">
......@@ -53,28 +52,35 @@
<el-checkbox v-for="sex in sexes" :label="sex" :key="sex">{{ sex }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="年龄" prop="agelist" style="width:50%" :label-width="formLabelWidth">
<div class="flex">
<div class="flex-item" >
<el-input v-model="addForm.everydayAdd" auto-complete="off" width='30%'>
<div class="flex">
<div class="flex-item" >
<el-form-item
label="年龄"
prop="ageStart"
name='ageStart'
:label-width="formLabelWidth">
<el-input v-model="filterForm.ageStart" auto-complete="off" >
<template slot='suffix'>
岁
</template>
</el-input>
</div>
<span style="width:20%;text-align:center"> —— </span>
<div class="flex-item" >
<el-input v-model="addForm.everydayAdd" auto-complete="off" width='30%'>
</el-form-item>
</div>
<span style="width:20%;text-align:center;line-height:35px"> —— </span>
<div class="flex-item" >
<el-form-item style="width:50%" prop="ageEnd" name='ageEnd'>
<el-input v-model="filterForm.ageEnd" auto-complete="off" width='30%'>
<template slot='suffix'>
岁
</template>
</el-input>
</div>
</el-form-item>
</div>
</el-form-item>
</div>
</div>
<div class="flex">
<el-form-item label="省市">
<el-form-item label="省市" prop="province" name='province'>
<div class="flex">
<ul class="provincelist">
<li v-for='(province, ind) in area.provinceOptions' :key="ind" @click='getProvince(ind)'>
......@@ -171,8 +177,8 @@
</el-form-item>
<div class="flex" style='width:40%;margin-left:40px;line-height:30px'>
<el-form-item prop="flowStart" >
<el-input v-model='filterForm.flowStart'>
<el-form-item prop="consumptionStart" >
<el-input v-model='filterForm.consumptionStart'>
<template slot='suffix'>
元
</template>
......@@ -181,8 +187,8 @@
</el-form-item>
<span style="width:35%;text-align:center"> —— </span>
<el-form-item prop='flowEnd'>
<el-input v-model='filterForm.flowEnd'>
<el-form-item prop='consumptionEnd'>
<el-input v-model='filterForm.consumptionEnd'>
<template slot='suffix'>
元
</template>
......@@ -282,8 +288,6 @@ export default class FilterNumber extends Vue {
@State('filterNumber') public numberFilterState: any;
@Action(GET_FILTERLIST) public getFilterlist: any;
@Action(CREATE_FILTERLIST) public createFilter: any;
// @Action(UPDATE_PERMISSION) public updatePermission: any;
// @Action(DELETE_PERMISSION) public deletePermission: any;
// 初始化数据
// 表格
......@@ -444,7 +448,8 @@ export default class FilterNumber extends Vue {
public filterForm = {
dsgroup: '',
agerange: [10, 80],
ageStart: '',
ageEnd: '',
sexlist: [],
flow: [],
flowStart: '',
......@@ -478,13 +483,31 @@ export default class FilterNumber extends Vue {
public addFilterFormRules = {
dsgroup: [
{ validator: this.validateDsgroup, trigger: 'blur' },
{ validator: this.validateDsgroup, trigger: 'change' },
],
sexlist: [
{ validator: this.validateSexList, trigger: 'change' },
],
verificationLanguage: [
{ validator: this.verificationLanguage, trigger: 'blur' },
ageStart: [
{ validator: this.validateAgeStart, trigger: 'blur' },
],
ageEnd: [
{ validator: this.validateAgeEnd, trigger: 'blur' },
],
province: [
{ validator: this.validateProvince, trigger: 'change' },
],
flowStart: [
{ validator: this.validateFlowStart, trigger: 'change' },
],
flowEnd: [
{ validator: this.validateFlowEnd, trigger: 'change' },
],
consumptionStart: [
{ validator: this.validateConsumptionStart, trigger: 'change' },
],
consumptionEnd: [
{ validator: this.validateConsumptionEnd, trigger: 'change' },
],
};
......@@ -584,11 +607,19 @@ export default class FilterNumber extends Vue {
}, 3000);
}
public compareNumber(val1: string, val2: string) {
const num1 = Number(val1);
const num2 = Number(val2);
if (num1 >= num2 || num1 < 0) {
return false;
}
return true;
}
public sumbitAddFilter() {
const form = this.$data.filterForm;
this.$refs.filterForm.validate((valid: any) => {
if (valid) {
// console.log('验证通过了');
// 提交
// this.createPermission(form).then((data: any) => {
// this.closeDialog();
......@@ -602,7 +633,6 @@ export default class FilterNumber extends Vue {
const form = this.$data.addForm;
this.$refs.addForm.validate((valid: any) => {
if (valid) {
// console.log('验证通过了');
// 提交
// this.createPermission(form).then((data: any) => {
// this.closeDialog();
......@@ -659,11 +689,11 @@ export default class FilterNumber extends Vue {
// 筛选部分验证
public validateDsgroup(rule: any, value: any, callback: any) {
if(!value) {
if (!value) {
callback(new Error('名称不可为空'));
return false;
}
if(value.length >=20) {
if (value.length >= 20) {
callback(new Error('字符长度不可超过20字'));
return false;
}
......@@ -671,21 +701,121 @@ export default class FilterNumber extends Vue {
}
public validateSexList(rule: any, value: any, callback: any) {
if(value.length === 0) {
if (value.length === 0) {
callback(new Error('至少选中一位'));
return false;
}
callback();
}
public validateAgeList(rule: any, value: any, callback: any) {
if(value.length === 0) {
public validateAgeStart(rule: any, value: any, callback: any) {
const reg = new RegExp('^[0-9]*$', 'i');
if (value === '') {
callback(new Error('请输入数字'));
return false;
}
if (!reg.test(value)) {
callback(new Error('仅能输入数字'));
return false;
}
callback();
}
public validateAgeEnd(rule: any, value: any, callback: any) {
const reg = new RegExp('^[0-9]*$', 'i');
if (value === '') {
callback(new Error('请输入数字'));
return false;
}
if (!reg.test(value)) {
callback(new Error('仅能输入数字'));
return false;
}
if (!this.compareNumber(this.filterForm.ageStart, value)) {
callback(new Error('您所输入数字不合法'));
return false;
}
callback();
}
public validateProvince(rule: any, value: any, callback: any) {
const provincelist = this.area.checkedProvinces;
const provinceOptions = this.area.provinceOptions;
let IsSelectedCity = false;
provinceOptions.map((val) => {
if (val.isIndeterminate) {
IsSelectedCity = true;
}
});
if (provincelist.length === 0 && !IsSelectedCity) {
callback(new Error('至少选中一位'));
return false;
}
callback();
}
public validateFlowStart(rule: any, value: any, callback: any) {
const reg = new RegExp('^[0-9]*$', 'i');
if (value === '') {
callback(new Error('请输入数字'));
return false;
}
if (!reg.test(value)) {
callback(new Error('仅能输入数字'));
return false;
}
callback();
}
public validateFlowEnd(rule: any, value: any, callback: any) {
const reg = new RegExp('^[0-9]*$', 'i');
if (value === '') {
callback(new Error('请输入数字'));
return false;
}
if (!reg.test(value)) {
callback(new Error('仅能输入数字'));
return false;
}
if (!this.compareNumber(this.filterForm.flowStart, value)) {
callback(new Error('您所输入数字不合法'));
return false;
}
callback();
}
public validateConsumptionStart(rule: any, value: any, callback: any) {
const reg = new RegExp('^[0-9]*$', 'i');
if (value === '') {
callback(new Error('请输入数字'));
return false;
}
if (!reg.test(value)) {
callback(new Error('仅能输入数字'));
return false;
}
callback();
}
public validateConsumptionEnd(rule: any, value: any, callback: any) {
const reg = new RegExp('^[0-9]*$', 'i');
if (value === '') {
callback(new Error('请输入数字'));
return false;
}
if (!reg.test(value)) {
callback(new Error('仅能输入数字'));
return false;
}
if (!this.compareNumber(this.filterForm.consumptionStart, value)) {
callback(new Error('您所输入数字不合法'));
return false;
}
callback();
}
// // 生命周期
// public mounted() {
// // this.getPermission({ size: this.size, page: this.page });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment