文章目录
表单验证
基本结构、写法
方法步骤
1、在html中给el-form增加 :rules="rules"
2、html中在el-form-item 中增加属性 prop="名称"
3、js中直接在data中定义rules:{}
4、如果需要自定义 验证器 ，在data中定义，并在rules中对应需要验证的validator来指定验证器名称
基本结构
（以下表常用单校验规则可查看对应放置位置）
注意
- 渲染表单数据ruleForm、校验规则rules必填
- 若为自定义校验规则，data中自定义校验规则函数需要写，rules中对应需要验证的validator来指定验证器名称
- 名称要与表格渲染名称一一对应
- 可以设置多重验证标准
单选、多选、日期时间选择器...
js
<template>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
style="width: 80%"
>
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="ruleForm.date1"
style="width: 100%"
></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker
placeholder="选择时间"
v-model="ruleForm.date2"
style="width: 100%"
></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="即时配送" prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="ruleForm.age"></el-input>
</el-form-item>
<el-form-item label="test" prop="test">
<el-input v-model="ruleForm.test"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>立即创建</el-button
>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
//自定义校验规则
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error("年龄不能为空"));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error("请输入数字值"));
} else {
if (value < 18) {
callback(new Error("必须年满18岁"));
} else {
callback();
}
}
}, 1000);
};
//自定义校验规则
const checktest = (rule, value, callback) => {
if (!Number(value)) {
callback(new Error("只能输入数字 1-12"));
} else {
if (value < 1 || value > 12) {
callback(new Error("只能输入数字 1-12"));
} else {
callback();
}
}
return callback();
};
return {
//渲染表单数据
ruleForm: {
name: "",
region: "",
date1: "",
date2: "",
delivery: false,
type: [],
resource: "",
desc: "",
age: "",
test: "",
},
//校验规则
rules: {
name: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur",},
],
region: [
{ required: true, message: "请选择活动区域", trigger: "change" },
],
date1: [
{
type: "date",
required: true,
message: "请选择日期",
trigger: "change",
},
],
date2: [
{
type: "date",
required: true,
message: "请选择时间",
trigger: "change",
},
],
type: [
{
type: "array",
required: true,
message: "请至少选择一个活动性质",
trigger: "change",
},
],
resource: [
{ required: true, message: "请选择活动资源", trigger: "change" },
],
desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
//自定义校验规则
age: [{ validator: checkAge, trigger: "blur" }],
test: [{ validator: checktest, trigger: "blur" }],
},
};
},
methods: {
//提交表单
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
//重置
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
};
</script>
<style>
</style>
常用表单验证规则
提交表单校验
js
//提交表单
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},重置表单校验
js
//重置
resetForm(formName) {
this.$refs[formName].resetFields();
},必填校验
可以与其他校验同时设置
js
name:[{ required: true, message: '请输入活动名称', trigger: 'blur' }]字符数校验+必填校验
设置多重验证标准
js
name: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{min: 3,max: 5,message: "长度在 3 到 5 个字符",trigger: "blur"},
]只能为中文校验
js
test1: [{ pattern: /^[\u4E00-\u9FA5]+$/, message: "用户名只能为中文" }],字符数校验
js
test1: [{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }]自定义校验规则
封装相似功能的校验器(以限定输入字符长度为例)
如不重复利用，可将变量改为具体数值或句子
可根据具体验证规则修改
js
// 封装一下相似功能的校验器
const validatorMethod = function (length) {
return (rule, value, callback) => {
if (value.length < length) {
var message="test长度不能小于"+length
callback(new Error(message));
} else {
callback();
}
};
};rules
js
test: [{ validator: validatorMethod(3), trigger: "blur" }],以下皆可仿照'封装相似功能的校验器'封装
只能输入数字x-x
具体数值可根据实际情况更改
js
const checktest = (rule, value, callback) => {
if (!Number(value)) {
callback(new Error("只能输入数字 1-12"));
} else {
if (value < 1 || value > 12) {
callback(new Error("只能输入数字 1-12"));
} else {
callback();
}
}
return callback();
};rules
js
test: [{ required: true,validator: checktest, trigger: "blur" }],手机号校验
js
// 手机号校验器
const phoneValidator = (rule, value, callback) => {
if (/^1[3456789]\d{9}$/.test(value)) { // 利用正则表达式校验手机号
callback()
} else {
callback(new Error('请输入正确手机号'))
}
}rules
js
test1: [ // 手机号验证
{ required: true, trigger: 'change', message: '手机号不能为空' },
{ min: 11, max: 11, trigger: 'change', message: '请输入11位手机号码' },
{ validator: phoneValidator, trigger: 'blur' }
],邮箱校验
js
const emailValidator = (rule, value, callback) => {
if (/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/.test(value)) {
// 利用正则表达式校验邮箱
callback();
} else {
callback(new Error("请输入正确邮箱号"));
}
};rules
js
email: [
// 手机号验证
{ required: true, trigger: "change", message: "邮箱号不能为空" },
{ validator: emailValidator, trigger: "blur" },
],身份证号校验
js
const IDcardValidator = (rule, value, callback) => {
if (/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
callback();
} else {
callback(new Error("请输入正确的身份证号"));
}
};rules
js
IDcard: [
{ required: true, trigger: "change", message: "身份证号不能为空" },
{ validator: IDcardValidator, trigger: "blur" },
],其余正则表达式校验
只需替换以上'手机号、邮箱、身份证号...'正则表达式，更改文字提示即可
ip校验
js
/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/营业执照校验
js
/^[A-Z0-9]{8}-[A-Z0-9]$|^[A-Z0-9]{8}-[A-Z0-9]-[0-9]{2}$/银行卡校验
js
/^([1-9]{1})(\d{14}|\d{18})$/微信号校验
js
/^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/6-12位字母和数字组合
js
/^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,12}$/包含英文字母、数字及下划线组成
js
/^[_a-zA-Z0-9]+$/请输入8-20位英文字母、数字或者符号
js
/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){8,20}$/整数
js
/^[1-9][0-9]*$/纯数字
js
/^\d+$|^\d+[.]?\d+$/价格
js
/^-?\d{1,4}(?:\.\d{1,2})?$ / 信号校验
js
/^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/6-12位字母和数字组合
js
/^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,12}$/包含英文字母、数字及下划线组成
js
/^[_a-zA-Z0-9]+$/请输入8-20位英文字母、数字或者符号
js
/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){8,20}$/整数
js
/^[1-9][0-9]*$/纯数字
js
/^\d+$|^\d+[.]?\d+$/价格
js
/^-?\d{1,4}(?:\.\d{1,2})?$ /