Vue+ElementUI为了复用公共的表单验证规则,将验证抽取出来。
效果图如下:
目录结构如下图:
在util中创建公共表单验证规则regexp.js具体代码如下:
const checkMoney = (rule, value, callback) => {
var myreg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/
if (!myreg.test(value)) {
callback(new Error('请输入正确金额,保留两位小数'))
} else {
callback()
}
}
const checkMoney99 = (rule, value, callback) => {
if (Number(value) > 99) {
callback(new Error('输入金额不得大于99'))
} else {
callback()
}
}
const checkMoney999 = (rule, value, callback) => {
if (Number(value) > 999) {
callback(new Error('输入金额不得大于999'))
} else {
callback()
}
}
export {
checkMoney,
checkMoney99,
checkMoney999
}
// ...其他的规则
随后在需要使用到验证的vue页面引入:
<template>
<div class="content-validate">
<h3>验证规则全局复用</h3>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="150px">
<el-form-item label="小于99金额" prop="money99">
<el-input type="text" v-model="ruleForm.money99" clearable class="inputWidth"></el-input>
</el-form-item>
<el-form-item label="小于999金额" prop="money999">
<el-input type="text" v-model="ruleForm.money999" clearable class="inputWidth"></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" @click="submitForm" size="small">添加</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {checkMoney, checkMoney99, checkMoney999} from '@/utils/regexp.js'
export default {
data () {
return {
// 表单的真实数据
ruleForm: {
money99: '',
money999: ''
},
rules: {
money99: [{
required: true,
validator: checkMoney,
trigger: 'blur'
}, {
validator: checkMoney99,
trigger: 'blur'
}],
money999: [{
required: true,
validator: checkMoney,
trigger: 'blur'
}, {
validator: checkMoney999,
trigger: 'blur'
}]
}
}
},
methods: {
// 验证表单
submitForm () {
this.$refs.ruleForm.validate((validate) => {
if (validate) {
this.$message({
type: 'success',
message: this.ruleForm
})
}
})
}
}
}
</script>
<style>
.content-validate{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.inputWidth {
width: 180px;
}
</style>
以上就是我对表单验证复用的使用,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。