vue -element ui 自定义验证规则，封装在公共的文件里

101 阅读 0 评论 67 点赞

我是靠谱客的博主舒心故事，最近开发中收集的这篇文章主要介绍vue -element ui 自定义验证规则，封装在公共的文件里，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.首先新建一个rules.js 的文件编写校验规则我新建在api 文件下。

// 账号
let codeReg = /^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/
// 电话
let phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
// 必须为数字
let numberReg = /^d+$|^d+[.]?d+$/
// 密码
let passwordReg = /^(?![d]+$)(?![a-zA-Z]+$)(?![^da-zA-Z]+$)([^u4e00-u9fa5s]){6,20}$/
// 联系人
let contactsReg = /^[u0391-uFFE5A-Za-z]+$/
let regId = /(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/
let emailReg = /^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,4}$/
let FormValidate = (function () {
function FormValidate () {}
// From表单验证规则
可用于公用的校验部分
FormValidate.Form = function () {
return {
// 账号的验证规则
validateCode (rule, value, callback) {
if (!value) {
return callback(new Error('请输入账号'))
}
if (!codeReg.test(value)) {
callback(new Error('账号必须为6-20位字母和数字组合'))
} else {
callback()
}
},
// 只能数字的验证
validateNumber (rule, value, callback) {
if (value !== '') {
if (!numberReg.test(value)) {
callback(new Error('员工数量必须为数字'))
} else {
callback()
}
} else {
callback()
}
},
// 密码的验证
validatePsdReg (rule, value, callback) {
if (!value) {
return callback(new Error('请输入密码'))
}
if (!passwordReg.test(value)) {
callback(new Error('请输入6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种'))
} else {
callback()
}
},
// 联系人
validateContacts (rule, value, callback) {
if (!value) {
return callback(new Error('请输入联系人'))
}
if (!contactsReg.test(value)) {
callback(new Error('联系人不可输入特殊字符'))
} else {
callback()
}
},
// 邮箱的验证规则
validateEmail (rule, value, callback) {
if (value !== '') {
if (!emailReg.test(value)) {
callback(new Error('邮箱格式不正确'))
} else {
callback()
}
} else {
callback()
}
},
// 电话号码的验证
validatePhone (rule, value, callback) {
if (!value) {
return callback(new Error('请输入手机号码'))
}
if (!phoneReg.test(value)) {
callback(new Error('手机格式不正确'))
} else {
callback()
}
},
// 身份证的验证规则
ID (rule, value, callback) {
if (!value) {
return callback(new Error('身份证不能为空'))
}
if (!regId.test(value)) {
callback(new Error('请输入正确的二代身份证号码'))
} else {
callback()
}
}
}
}
return FormValidate
}())
exports.FormValidate = FormValidate

2.在组件中引入

import rules from “@/api/rules.js”

在js里

data () {
return {
// 提交的参数
form: {
companyName: '',
number: '',
code: '',
password: '',
rePassword: '',
contacts: '', // 联系人
phone: '',
email: '',
imgCode: ''
},
getImgCodeResults: '',
keyResults: '',
// 校验规则
rules: {
companyName: [
{required: true, message: '请输入公司名称', trigger: 'blur'},
// 可以设置双重验证标准
{max: 30, message: '公司名称不可超过30个字符11'}
],
number: [
{required: false, validator: rules.FormValidate.Form().validateNumber, trigger: 'change'},
{max: 10, message: '员工数量不可超过10亿'}
],
code: [{required: true, validator: rules.FormValidate.Form().validateCode, rigger: 'blur'}],
password: [{required: true, validator: rules.FormValidate.Form().validatePsdReg, rigger: 'blur'}],
contacts: [
{required: true, validator: rules.FormValidate.Form().validateContacts, rigger: 'blue'},
{max: 10, message: '联系人不可超过10个字符'}
],
phone: [{required: true, validator: rules.FormValidate.Form().validatePhone, trigger: 'blur'}],
email: [{required: false, validator: rules.FormValidate.Form().validateEmail, trigger: 'change'}],
imgCode: [{required: true, message: '请输入验证码', rigger: 'blue'}]
}
}
},

3.表单部分

<el-form ref="form" :rules="rules" :model="form">
<el-form-item prop="companyName">
<i></i>
<el-input clearable v-model.trim="form.companyName" placeholder="请输入公司名称" auto-complete="true"></el-input>
</el-form-item>
<el-form-item prop="number">
<el-input clearable v-model="form.number" placeholder="请输入员工数量" auto-complete="true"></el-input>
</el-form-item>
<el-form-item prop="code">
<i></i>
<el-input clearable v-model.trim="form.code" placeholder="请输入账号" auto-complete="true"></el-input>
<!--<p class="tip">6-20位字母或字母与数字组合</p>-->
</el-form-item>
<el-form-item prop="password">
<i></i>
<el-input clearable type="password" v-model.trim="form.password" placeholder="请输入密码" auto-complete="true"></el-input>
<!--<p class="tip">6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种</p>-->
</el-form-item>
<el-form-item prop="rePassword">
<i></i>
<el-input clearable type="password" v-model.trim="form.rePassword" placeholder="请输入确认密码" auto-complete="true"></el-input>
</el-form-item>
<el-form-item prop="contacts">
<i></i>
<el-input clearable v-model="form.contacts" placeholder="请输入联系人" auto-complete="true"></el-input>
</el-form-item>
<el-form-item
prop="phone">
<i></i>
<el-input clearable v-model="form.phone" placeholder="请输入联系人手机号码" auto-complete="true"></el-input>
</el-form-item>
<el-form-item
prop="email">
<el-input clearable v-model.trim="form.email" placeholder="请输入邮箱" auto-complete="true"></el-input>
</el-form-item>
<el-form-item
prop="imgCode">
<i></i>
<el-input v-model="form.imgCode" placeholder="请输入验证码" auto-complete="true"></el-input>
<img class="loginCodeImg" :src="getImgCodeResults" @click="editCaptcha">
</el-form-item>
<el-button class="btn-login" type="primary" size="medium" @click="submitForm('form')">提交申请</el-button>
</el-form>