表单校验
- 1、 手机号码 校验
<FormItem prop="phone">
<Input type="text" v-model="resetForm.phone" placeholder="请输入您的手机号码" clearable />
</FormItem>
phone: [
{ required: true, message: "请输入手机号码。", trigger: "blur" },
{ pattern: /^1[3456789]\d{9}$/, message: "手机号码格式不正确", trigger: "blur" }
],
- 2、 8位数包含字母和数字密码、再次输入密码 校验
<i-col span="24">
<FormItem prop="password">
<Input type="password" class="pass" password v-model="resetForm.password" placeholder="请输入新的登录密码" />
</FormItem>
</i-col>
<i-col span="24">
<FormItem prop="confirmPass">
<Input type="password" class="pass" password v-model="resetForm.confirmPass" placeholder="请再次确认密码" />
</FormItem>
</i-col>
data () {
const pwdCheck = (rule, value, callback) => {
let str = value;
let reg = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$)/);
if (str == null || str.length < 8) {
callback(new Error('密码至少8位,同时包含字母和数字。'));
} else if (!reg.test(str)) {
callback(new Error('密码至少8位,同时包含字母和数字。'));
} else {
callback()
}
};
const pwdCheckValidate = (rule, value, callback) => {
let str = value;
if (str == null || str.length < 8) {
callback(new Error('密码至少8位,同时包含字母和数字。'));
this.compare = true;
} else if (this.resetForm.password != this.resetForm.confirmPass) {
callback(new Error('两次输入密码不一致。'));
this.compare = true;
} else {
this.compare = false;
callback()
}
};
return {
ruleValidate: {
verificate: [
{ required: true, message: '验证码不能为空。', trigger: 'change' }
],
phone: [
{ required: true, message: "请输入手机号码。", trigger: "blur" },
{ pattern: /^1[3456789]\d{9}$/, message: "手机号码格式不正确", trigger: "blur" }
],
password: [
{ required: true, validator: pwdCheck, trigger: 'change' }
],
confirmPass: [
{ required: true, validator: pwdCheckValidate, trigger: 'change' }
],
},
}
}
- 3、 多个下拉选择框 必选校验
<FormItem label="适用门店：" prop="shopId">
<Select v-model="formValidate.shopId" multiple style="width:400px" filterable @on-change="changeShop">
<Option value="0">所有门店</Option>
<Option v-for="item in shopdata" :value="item.id" :key="item.id">{{ item.name }}</Option>
</Select>
</FormItem>
shopId: [
{ type: 'array', required: true, message: '请选择适用门店', trigger: 'change' }
],
- 4、整数数字 校验
<FormItem label="券减免金额：" prop="deduction" >
<!-- :parser="value => value.replace(/\$\s?|(,*)/g, '') || 0" -->
<InputNumber :min="0" v-model="formValidate.deduction" style="width:300px"></InputNumber>
</FormItem>
deduction: [
{ required: true, pattern: /^[a-z0-9]+$/, message: '请输入券减免金额（整数)', trigger: 'change' },
],
- 5、文本字数 校验
<FormItem label="券使用说明：" prop="desc">
<Input v-model="formValidate.desc" type="textarea" maxlength="140" show-word-limit :autosize="{minRows: 3,maxRows: 5}" placeholder="请输入券使用说明"></Input>
</FormItem>
desc: [
{ required: true, message: '请输入券使用说明', trigger: 'change' },
{ type: 'string', min: 10, message: '使用说明最少不小于10个字数', trigger: 'change' }
],
- 6、时间区间 校验
<FormItem label="券有效时间：" prop="valTime" v-if="formValidate.valid == 'STATIC'">
<DatePicker type="datetimerange" v-model="formValidate.valTime" :options="options" @on-change="changeDate" placement="bottom-end" placeholder="请选择券有效时间" style="width:400px"></DatePicker>
</FormItem>
valTime: [
{
required: true, type: 'array', message: "请选择券有效时间", trigger: 'change',
fields: {
0: { type: "date", required: true, message: "请选择券有效时间" },
1: { type: "date", required: true, message: "请选择券有效时间" }
}
}
],
- 7、单个日期校验
<FormItem label="数据日期" prop="collectDate">
<DatePicker type="month" placeholder="请选择数据日期" transfer v-model="formValidate.collectDate"></DatePicker>
</FormItem>
collectDate: [
{ required: true, message: "请选择保障期限", trigger: 'change', pattern: /.+/ }
],
- 8、数字+字母 校验
<FormItem label="工单流水号" prop="workNum">
<Poptip trigger="focus" :word-wrap="true" :width="300" :transfer="true" :content="formValidate.workNum" placement="bottom" >
<Input v-model="formValidate.workNum" placeholder="请输入工单流水号" clearable style="width: 240px" />
</Poptip>
</FormItem>
data() {
const validateFun = (rule, value, callback) => {
let reg = new RegExp("^[A-Za-z0-9]+$");
if (value) {
if (reg.test(value)) {
callback();
} else {
callback(new Error("工单流水号限定为字母和数字"));
} else {
callback();
}
}
};
return {
ruleValidate: {
workNum: [
{ validator: validateFun, max: 124, message: '工单流水号由字母和数字组成', trigger: 'change' },
],
},
}
}
9、数字 校验
// template
<FormItem label="受理号码" prop="acceptNum">
<Input v-model="formValidate.acceptNum" placeholder="请输入受理号码" clearable style="width: 240px" />
</FormItem>
// data中
acceptNum: [
{
type: 'number', message: '请输入数字组成的号码', trigger: 'change', transform (value) {
return Number(value);
}
}
]
- 10、6-11位数字 校验
<FormItem label="主叫号码" prop="callingNum">
<Input v-model="formValidate.callingNum" placeholder="请输入受理号码" clearable />
</FormItem>
data () {
const numberCheck = (rule, value, callback) => {
let str = value;
let reg = new RegExp('^[0-9]*$');
if (str.length >11 || (str.length < 6 && str.length > 0)) {
callback(new Error('号码需在6-11。'));
} else if (!reg.test(str) ) {
callback(new Error('号码为数字。'));
} else {
callback()
}
};
}
ruleValidate: {
staffId: [
{ validator: numberCheck, trigger: 'change' }
]
},
- 11、 4位数字的验证码
<FormItem label="客户验证码" prop="code" class="code_formItem" v-show="isShow">
<Input v-model="formValidateCode.code" placeholder="请使用您收到的验证码" ></Input>
</FormItem>
export default {
data() {
const validateCode = (rule, value, callback) => {
if (!value) {
return callback(new Error("验证码不能为空"));
} else if (!/^\d{4}$/.test(value)) {
callback("请输入4位纯数字");
} else {
callback();
}
}
return {
ruleValidateCode: {
code: [
{ required: true, validator: validateCode, trigger: 'change' },
],
},
}
}
}
- 12、动态表单进行校验
<template>
<div>
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="160">
<div v-for="(item, index) in formValidate.arr" :key="index" style="padding-left: 130px;">
<Row>
<Col span="9">
<FormItem :prop="`arr.${index}.loadBalanceValue`" label="负载均衡器" :rules="ruleValidate.loadBalanceValue">
<Select v-model="formValidate.arr[index].loadBalanceValue" transfer style="width:285px" placeholder="请选择负载均衡器">
<Option v-for="(ele,idx) in loadBalanceValueList" :key="index + '_' + idx" :value="ele.value">
{{ele.label}}
</Option>
</Select>
</FormItem>
</Col>
<Col span="9">
<FormItem :prop="`arr.${index}.ecsGroupValue`" label="后端云服务器组" :rules="ruleValidate.ecsGroupValue">
<Select v-model="formValidate.arr[index].ecsGroupValue" transfer style="width:285px" placeholder="请选择后端云服务器组">
<Option v-for="(ele,idx) in ecsGroupValueList" :key="index + '_' + idx" :value="ele.value">
{{ele.label}}
</Option>
</Select>
</FormItem>
</Col>
</Row>
<Row>
<Col span="9">
<FormItem :prop="`arr.${index}.backPortValue`" label="后端端口" :rules="ruleValidate.backPortValue">
<Input v-model="formValidate.arr[index].backPortValue" placeholder="请输入后端端口" style="width: 285px"></Input>
</FormItem>
</Col>
<Col span="9">
<FormItem :prop="`arr.${index}.weight`" label="权重" :rules="ruleValidate.weight">
<Input v-model="formValidate.arr[index].weight" placeholder="请输入权重" style="width: 285px"></Input>
</FormItem>
</Col>
</Row>
<Col span="4">
<Button @click="handleRemove(index)" type="primary">删除</Button>
</Col>
</div>
<FormItem>
<div @click="handleAdd" class="handle_add">
<Button type="primary" shape="circle" icon="md-add" :disabled="formValidate.arr.length>=5"></Button>
<Button type="text" class="addnewdata" :disabled="formValidate.arr.length>=5">新增负载均衡器</Button>
<span class="more_add_tip">最多可再增加 {{5-(formValidate.arr.length)}} 个</span>
</div>
</FormItem>
</Form>
</div>
</template>
<script>
export default {
data () {
return {
formValidate: {
arr: [
{
loadBalanceValue: '', // 负载均衡器
ecsGroupValue: '2', // 后端云服务器组
backPortValue: '', // 后端端口
weight: '', // 权重
},
],
},
ruleValidate: {
loadBalanceValue: [{ required: true, message: '请选择负载均衡器', trigger: 'change' }],
ecsGroupValue: [{ required: true, message: '请输入后端云服务器组', trigger: 'change' }],
backPortValue: [{ required: true, message: '请输入后端端口', trigger: 'change' }],
weight: [{ required: true, message: '请输入权重', trigger: 'change' }],
},
}
},
methods: {
handleAdd () {
this.formValidate.arr.push(
{
loadBalanceValue: '', // 负载均衡器
ecsGroupValue: '2', // 后端云服务器组
backPortValue: '', // 后端端口
weight: '', // 权重
},
);
},
handleRemove (index) {
this.formValidate.arr.splice(index, 1);
}
}
}
</script>
动态表单验证效果如下图：
image.png
网友评论