【原】成功element ui输入验证

<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: "http://localhost:12345/api/test/Edit",

            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("http://localhost:12345/api/test/Gettest2?username="+this.usernamef).then((result) => {

      axios

        .get("http://localhost:12345/api/test/GetItem?" + 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>