方法一: 通过正则表达式实现
<template>
<div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-row>
<el-col :span="6">
<el-form-item label="金额" prop="money">
<el-input v-model.number="ruleForm.money"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6" style="text-align:center">
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
money:'',
},
rules: {
money:[
{
required: true, message: '金额不能为空'},
{
type: 'number', message: '金额必须为数字值'}, // 且不包括小数
{
pattern: /^([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/, message: '范围在0-255',trigger: 'blur'}
/*
范围0-255分析：
0-9： [0-9]
10-99： [1-9]\d
100-199: 1\d\d
200-249: 2[0-4]\d
250-255: 25[0-5]
*/
],
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('成功');
} else {
return false;
}
});
},
}
}
</script>
补充：正则表达式相关知识点
方法二：自定义校验规则
<template>
<div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-row>
<el-col :span="6">
<el-form-item label="金额" prop="money">
<el-input v-model.number="ruleForm.money"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6" style="text-align:center">
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
data() {
var checkMoney = (rule, value, callback) => {
if (!value) {
return callback(new Error('金额不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 0) {
callback(new Error('范围在0-255'));
} else if(value > 255){
callback(new Error('范围在0-255'));
}else {
callback();
}
}
}, 100);
};
return {
ruleForm: {
money:'',
},
rules: {
money:[
{
validator: checkMoney, trigger: 'blur' }
],
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('成功');
} else {
return false;
}
});
},
}
}
</script>
效果
转载：https://blog.csdn.net/ZYS10000/article/details/111119961
查看评论