记录下vue表单验证
2024-10-20 07:54:16
公共common文件夹下建立validate.js
/* 是否邮编*/
export function validateMail(rule, value,callback) {
const reg =/^[1-9][0-9]{5}$/;
if(value==''||value==undefined||value==null){
callback();
}else {
if ((!reg.test(value)) && value != '') {
callback(new Error('请输入正确的邮编'));
} else {
callback();
}
}
} /* 是否手机号码或者固话*/
export function validatePhoneTwo(rule, value, callback) {
const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;;
if (value == '' || value == undefined || value == null) {
callback();
} else {
if ((!reg.test(value)) && value != '') {
callback(new Error('请输入正确的电话号码或者固话号码'));
} else {
callback();
}
}
}
/* 是否固话*/
export function validateTelphone(rule, value,callback) {
const reg =/0\d{2}-\d{7,8}/;
if(value==''||value==undefined||value==null){
callback();
}else {
if ((!reg.test(value)) && value != '') {
callback(new Error('请输入正确的固话（格式：区号+号码,如010-1234567）'));
} else {
callback();
}
}
}
/* 是否手机号码*/
export function validatePhone(rule, value,callback) {
const reg =/^[1][3,4,5,7,8][0-9]{9}$/;
if(value==''||value==undefined||value==null){
callback();
}else {
if ((!reg.test(value)) && value != '') {
callback(new Error('请输入正确的电话号码'));
} else {
callback();
}
}
}
/* 是否身份证号码*/
export function validateIdNo(rule, value,callback) {
const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if(value==''||value==undefined||value==null){
callback();
}else {
if ((!reg.test(value)) && value != '') {
callback(new Error('请输入正确的身份证号码'));
} else {
callback();
}
}
} /* 是否邮箱*/
export function validateEMail2(rule, value,callback) {
const reg =/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
if(value==''||value==undefined||value==null){
callback();
}else{
if (!reg.test(value)){
callback(new Error('请输入正确的邮箱地址'));
} else {
callback();
}
}
}
在自己所需的.vue文件中引入全部，或者按需引入
import {validateIdNo,validatePhone,validateEMail2,validateMail} from './validate.js'
在template中绑定rules,prop写rules里对应的值,如下
<el-form ref="role" :model="role" label-width="120px" :rules="rules">
<el-form-item label="来信人" prop="fromName">
<el-input v-model="role.fromName"></el-input>
</el-form-item> <el-form-item label="邮箱" prop="email">
<el-input type="email" v-model="role.email"></el-input>
</el-form-item> <el-form-item label="来信目的" prop="objectiveType">
<el-select v-model="role.objectiveType" class="handle-select mr10">
<el-option v-for="item in purposeList" :key="item.id" :label="item.dict.name" :value="item.id"></el-option>
</el-select>
</el-form-item> <el-form-item label="手机号" prop="phone">
<el-input v-model="role.phone"></el-input>
</el-form-item> <el-form-item label="固定电话" prop="fixedPhone">
<el-input v-model="role.fixedPhone"></el-input>
</el-form-item> <el-form-item label="地址" prop="address">
<el-input v-model="role.address"></el-input>
</el-form-item> <el-form-item label="邮编" prop="postcode">
<el-input v-model="role.postcode"></el-input>
</el-form-item> <el-form-item label="标题" prop="title">
<el-input v-model="role.title"></el-input>
</el-form-item> <el-form-item label="内容" prop="content">
<el-input type="textarea" :rows="3" v-model="role.content"></el-input>
</el-form-item> <el-form-item label="是否公开" prop="isPublic">
<el-select v-model="role.isPublic" class="handle-select mr10">
<el-option key="1" label="公开" value="1"></el-option>
<el-option key="2" label="不公开" value="0"></el-option>
</el-select>
</el-form-item> <el-form-item label="选择部门" prop="deptId">
<el-cascader
:options="sponsor"
change-on-select
:show-all-levels="false"
v-model="role.deptId"
placeholder="选择部门"
></el-cascader>
</el-form-item>
<el-form-item label="来信人身份证" prop="fromIdCard">
<el-input v-model="role.fromIdCard"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitFormAdd('role')">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</el-form-item>
</el-form>
rules写在data里,完成
rules: {
fromName: [
{ required: true, message: "请输入来信人", trigger: "blur" }
],
email: [{ required: true, message: "请输入邮箱", trigger: "blur" },{validator:validateEMail2,trigger:"blur"}],
objectiveType: [
{ required: true, message: "请输入来信目的", trigger: "blur" }
],
phone: [
{ required: true, message: "请输入来信人手机号", trigger: "blur" },{validator:validatePhone,trigger:"blur"}
],
// fixedPhone: [{ required: true, message: "请输入来信人固定电话", trigger: "blur" }],
address: [{ required: true, message: "请输入地址", trigger: "blur" }],
postcode: [{ required: true, message: "请输入邮编", trigger: "blur" },{validator:validateMail,trigger:"blur"}],
title: [{ required: true, message: "请输入来信题目", trigger: "blur" }],
content: [
{ required: true, message: "请输入来信内容", trigger: "blur" }
],
isPublic: [{ required: true, message: "必填选项", trigger: "blur" }],
status: [{ required: true, message: "选择状态", trigger: "blur" }],
deptId: [
{ required: true, message: "请输入来信部门id", trigger: "blur" }
],
fromIdCard: [
{ required: true, message: "请输入来信人身份证号", trigger: "blur" },{validator:validateIdNo,trigger:"blur"}
]
}
最新文章
- SVM（支持向量机）的一点理解
- 【Java EE 学习 15】【自定义数据库连接池之动态代理的使用】
- Struts2 动态方法调用
- New line
- Go语言执行系统命令行命令（转）
- DIV实现CSS 的placeholder效果
- 关于UI资源获取资源的好的网站
- HDU 4310 Hero (贪心算法)
- Fedora8上Apache Httpd与Tomcat6初集成
- 链接库lib和dl的概念，加载方式的区别
- 【Java】List的三种遍历方法
- System.Rtti.TRttiObject.GetAttributes 简例
- Qt增加webp格式支持
- Debugging to Understand Finalizer--reference
- 配置php连接apache
- 通过Shell和Redis来实现集群业务中日志的实时收集分析
- SpringMVC整合Mybatis的流程
- 环境搭建 - Maven（Windows）
- 启用WCF压缩提升Dynamics 365 CE的网络性能
- bootstrapt 使用遇到问题