<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.5.4/lib/index.js"></script>
<div id="app">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="" prop="turnTrip">
<el-input v-model.number="ruleForm.turnTrip" type="number"></el-input>
</el-form-item>
<el-form-item label="" prop="initReadings">
<el-input v-model.number="ruleForm.initReadings" type="number"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm("ruleForm")"></el-button>
<el-button @click="resetForm("ruleForm")"></el-button>
</el-form-item>
</el-form>
</div>
var Main = {
data() {
return {
ruleForm: {
turnTrip: "",
initReadings: "",
desc: ""
},
rules: {
turnTrip: [{ required: true, validator:(rule,value,callback)=>{
if(!value){
callback(new Error(""));
}
if(value<0){
callback(new Error("0"));
}else{
callback();
}
}, trigger: "blur" }],
initReadings: [
{ required: true, message: "", trigger: "change" }
],
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount("-sharpapp")
@import url("//unpkg.com/element-ui@2.5.4/lib/theme-chalk/index.css");
https://jsfiddle.net/vx3mftb4/2/