前言：
如今看官们对“element表单校验取当个输入框的校验结果”大致比较关注，朋友们都需要分析一些“element表单校验取当个输入框的校验结果”的相关资讯。那么小编同时在网络上搜集了一些有关“element表单校验取当个输入框的校验结果””的相关知识，希望兄弟们能喜欢，兄弟们快快来了解一下吧！<template>
<div class="app-container">
<el-form
:model="form"
:rules="rules2"
ref="form"
label-width="80px"
class="demo-ruleForm login-container"
>
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
</el-form>
<el-button type="text" @click="modify();">确定修改</el-button>
</div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
import qs from "qs";
export default {
data() {
return {
form: {
username: "",
},
rules2: {
username: [
{
required: true,
message: "用户名不能为空",
trigger: "blur",
},
],
},
};
},
mounted() {
var id = this.$route.query.id;
this.loadData(id);
},
methods: {
modify() {
//先判断表单是否通过了判断
this.$refs.form.validate((valid) => {
//代表通过验证 ,将参数传回后台
if (valid) {
axios({
url: ";,
method: "put",
data: {
id: this.$route.query.id,
username: this.form.username,
},
}).then((res) => {
console.log("请求结果：", res);
alert(res.data.message);
this.$router.push("/list1");
});
}
});
},
loadData(id) {
let param = { id: id };
// axios.get(";+this.usernamef).then((result) => {
axios
.get("; + qs.stringify(param))
.then((result) => {
var _data = result.data.data;
this.form = Object.assign({}, _data);
});
},
},
};
</script>
上图rules2下面就是验证，对应form必须加ref属性，对应验证控件必须加上prop
属性，如果需要验证的话。如下图：
<el-form
:model="form"
:rules="rules2"
ref="form"
label-width="80px"
class="demo-ruleForm login-container"
>
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" />
</el-form-item>
