Vue+Element给表单设置多个验证+规则Rules自定义
注意:
1、<el-form >的:rules="Rules" 这个Rules名字需要对应
2、<el-form-item>的prop="quantity"这个prop名字需要对应好
<el-dialog :title="title" v-dialogDrag :visible.sync="BoundOpen">
<el-form ref="Form" :model="Form" :rules="Rules" label-width="80px">
<el-form-item label="数量" prop="quantity">
<el-input v-model="quantity" placeholder="请输入数量"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="Bound">确 定</el-button>
<el-button @click="cancelBound">取 消</el-button>
</div>
</el-dialog>
方法一:
Rules: {
quantity: [
{required: true, message: "添加数量不能为空", trigger: "blur"},
{digits: true, message: "必须输入整数", trigger: "blur"},
{range: [1, 100], message: "输入数量超出范围", trigger: "blur"},
],
}
方法二:
Rules: {
quantity: [
{validator: checkQuantity, trigger: 'blur'}
],
},
data() {
const checkQuantity = (rule, value, callback) => {
if (this.buttonFlag == 'unbind' || this.buttonFlag == 'editNormal') {
if (value == null || value == '') {
callback(new Error('请输入数量'));
} else if (!/^\d+(\.\d+)?$/.test(value)) {
callback(new Error('请输入合法的数字'));
}else if (value == 0) {
callback(new Error('数量不能为0'));
} else {
callback();
}
} else {
callback();
}
}
}
可以结合正则表达式使用~
原文地址:https://blog.csdn.net/m0_63456808/article/details/140515377
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!