1、正数值
2、最长三位小数
3、必填/非必填
实现方法
el-form表单验证 自定义校验规则
全部代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../../3rd/elementui/index.2.15.9.css">
</head>
<body>
<div id="app">
<el-form :model="ruleForm" :rules="rules" :inline="true" ref="ruleForm" class="my-ruleForm">
<el-form-item prop="supplierName" label="审批人">
<el-input v-model="ruleForm.supplierName" type="text" placeholder="请输入" @input ="ruleForm.supplierName=ruleForm.supplierName.replace(/[^0-9.]/g,'')"></el-input>
</el-form-item>
<el-form-item prop="supplierName2"label="审批人2" >
<el-input v-model="ruleForm.supplierName2" type="text" placeholder="请输入" @input ="ruleForm.supplierName2=ruleForm.supplierName2.replace(/[^0-9.]/g,'')"></el-input>
</el-form-item>
<el-button type="primary" @click="submit" >提交</el-button>
</el-form>
</div>
<script src="../../3rd/vue/vue.min.js"></script>
<script src="../../3rd/elementui/index.2.15.9.min.js"></script>
<script>
var app = new Vue({
el:"#app",
data(){
var threeNumber = (rule, value, callback) => {
if(value==''||value==null||value==undefined){
if(rule.required){
callback(new Error("请输入"));
}
}else if(Number(value)<0 || Number(value)==0){
callback(new Error("正数值,限三位小数"));
}else if ((String(value).length - (String(value).indexOf(".") + 1)) > 3 && String(value).indexOf(".") >= 0) {
callback(new Error("正数值,限三位小数"));
} else {
callback();
}
}
return{
ruleForm:{
supplierName:''
},
rules:{
supplierName: [
{ required: true, validator: threeNumber,trigger: ['blur', 'change'] }
],
supplierName2: [
{ validator: threeNumber,trigger: ['blur', 'change'] }
],
}
}
},
methods:{
submit() {
let self = this
this.$refs['ruleForm'].validate((valid, obj) => {
if (valid) {
console.log(valid)
} else {
return false
}
})
}
}
})
</script>
</body>
</html>