<!-- 正整数 -->
<el-form-item prop="total" label="发行量">
<el-input v-model.number="form.total" placeholder="发行量" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"/>
</el-form-item>
<!-- 0和正整数 -->
<el-input v-model.number="form.order" placeholder="排序" onkeyup="value=value.replace(/[^\d]+/g,'')"/>
<!-- 金额,保留两位小数 -->
<el-form-item prop="min_price" label="最低使用价格">
<el-input-number v-model.number="form.min_price" placeholder="最低使用价格" type="number" :precision="2" min="0.00"/>
</el-form-item>
// 表单校验
rules: {
mgGoodsId: [
{required: true, message: '请输入商品id', trigger: 'blur'}
],
mgOrder: [
{required: true, message: '请输入排序', trigger: 'change'},
{
validator: (rule, value, callback) => {
if (value < 0) {
callback(new Error('需要大于0'))
} else if (value > 10000000) {
callback(new Error('需要小于10000000'))
} else {
callback()
}
},
trigger: 'blur'
}
],
}
校验输入框内容
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="物流公司" prop="logisticsCompany">
<el-input v-model="form.logisticsCompany" placeholder="请输入物流公司" oninput="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')" />
</el-form-item>
<el-form-item label="物流单号" prop="logisticsCode">
<el-input v-model="form.logisticsCode" placeholder="请输入物流单号" oninput="value=value.replace(/[^\w]/g,'')" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="备注" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
oninput用正则结合elementui
// 表单校验
rules: {
logisticsCompany: [
{ required: true, message: "物流公司不能为空", trigger: "blur" },
{min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
],
logisticsCode: [
{ required: true, message: "物流单号不能为空", trigger: "blur" },
{min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
],
remark: [
{min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
]
},