1、关于前端页面代码和规则验证可以参照之前文章
el-input 限制只能输入正整数
2、本文主要阐述ts公共验证类结合rule的形式对输入值进行规则校验
① 前端页面部分
<template>
<div class="container">
<el-form
ref="dialogForm"
size="small"
class="form"
:model="dialogForm"
:rules="rules"
>
<el-row :gutter="30">
<el-col :span="12">
<el-form-item
label="金额"
prop="moneyNum"
>
<el-input
v-model="dialogForm.moneyNum"
autocomplete="off"
placeholder="请输入金额"
clearable
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script lang="ts">
import { Vue } from 'vue-property-decorator'
import { Form } from 'element-ui'
import { checkInputPositiveRealNum } from '@/utils/validate' // 验证
export default class Edit extends Vue {
@Prop() method!: any;
private dialogForm = {
moneyNum: ''
}
private rules = {
moneyNum: [{ validator: checkInputPositiveRealNum, trigger: 'blur' }]
};
private handleClose() {
this.$emit('close')
}
}
</script>
<style lang="scss" scoped>
.container {
padding: 0px 20px 0 20px;
.form {
max-height: 700px;
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 30px;
}
}
</style>
② validate.ts 验证部分
// 输入验证：大于0的数
export const checkInputPositiveRealNum = (rule: any, value: string, callback: any) => {
if (!value) {
callback()
} else {
const regPositiveRealNum = /^(([1-9]\d*)|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/g
if (regPositiveRealNum.test(value)) {
callback()
} else {
return callback(new Error('请输入大于0的数'))
}
}
}
3、整数、小数、实数、整数、负数等的输入验证规则如下，只需要更新validate.ts和前端页面import { checkInputPositiveRealNum } from '@/utils/validate' // 验证的部分
① 验证正整数+正小数(包含0)
export const checkIsPositive = (rule, value, callback) => {
if (!value) {
callback()
} else {
const reg = /^\d+(?=\.{0,1}\d+$|$)/
if (reg.test(value)) {
callback()
} else {
callback(new Error('请输入大于等于0的正数'))
}
}
}
② 验证正整数+正小数
export const checkIsPositiveEx0 = (rule, value, callback) => {
if (!value) {
callback()
} else {
/// ^(\d|[1-9]\d+)(\.\d{1,2})?$/ ---->2位小数
const reg = /^(\d|[1-9]\d+)(\.\d+)?$/
if (reg.test(value)) {
if (value === '0') {
callback(new Error('请输入大于0的正实数'))
} else {
callback()
}
} else {
callback(new Error('请输入大于0的正实数'))
}
}
}
③ 验证正整数+0
export const checkIsPositiveInteger = (rule, value, callback) => {
if (!value) {
callback()
} else {
const reg = /^(0|[1-9][0-9]*)$/
if (reg.test(value)) {
callback()
} else {
callback(new Error('请输入大于等于0的正整数'))
}
}
}
④ 验证正整数
export const checkIsPositiveIntegerEx0 = (rule, value, callback) => {
if (!value) {
callback()
} else {
const reg = /^([1-9][0-9]*)$/
if (reg.test(value)) {
callback()
} else {
callback(new Error('请输入大于0的正整数'))
}
}
}
⑤ 特殊要求举例(包括小数位数、输入整数和小数位数的长度等)
export const checkIsPositiveInteger123 = (rule, value, callback) => {
if (!value) {
callback()
} else {
const reg = /^[1-9]\d{0,11}(\.\d{1,4})?$|^0(\.\d{1,4})?$/
if (reg.test(value)) {
callback()
} else {
callback(new Error('请输入正确格式数字，整数位不能超过12位，小数位不能超过4位'))
}
}
}
4、参考资料
① js正则表达式，自己写个真正好用的大于0的数字包括小数，排除0.0等实际等于0的小数
② js 大于等于0的正数和正整数
③ 正则：必须是正整数或小数，小数点后保留3位，输入整数不超过12位
