【VUE】3.表單操作

1. Form組件渲染

　　1. components -> 新增組件Form.vue

<template>
    <div>表單驗證</div>
</template>

<script>
export default {
    
}
</script>

<style lang="less" scoped>

</style>

　　2. 添加路由 router -> index.js

// 導入組件
import Form from '../components/Form.vue'

//增加新路由規則
const routes = [
  {
    path: '/',
    redirect: '/demo1'
  },
  {
    path: '/demo1',
    name: 'Demo1',
    component: Demo1
  },
  {
    path: '/form',
    name: 'Form',
    component: Form
  }
]

 

　　3. npm run serve 訪問http://localhost:8080/#/form

 

 2. 數據綁定

　　1. 通過Element-UI布局  components ->  Form.vue

　　　　用到的組件:el-form el-form-item el-input el-button

<template>
  <div class="form_container">
    <el-form label-width="100px">
      <el-form-item label="用戶名">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="密碼">
        <el-input></el-input>
      </el-form-item>
      <el-form-item class="btns">
        <el-button type="primary">校驗</el-button>
        <el-button type="info">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

　　

　　

　　2.plugins -> element.js 

　　　　按需導入Element-UI  組件

import Vue from 'vue'
import { Button, Form, Input, FormItem } from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(Input)
Vue.use(FormItem)

　　

　　3.數據綁定

　　　知識點：

　　　　model：表單數據對象

　　　　v-model:需要綁定的數據對象

<template>
  <div class="form_container">
    <el-form :model="Form" label-width="100px">
      <el-form-item label="用戶名">
        <el-input v-model="Form.username"></el-input>
      </el-form-item>
      <el-form-item label="密碼">
        <el-input v-model="Form.password"></el-input>
      </el-form-item>
      <el-form-item class="btns">
        <el-button type="primary">校驗</el-button>
        <el-button type="info">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

　　4.到行為去增加數據對象

<script>
export default {
  data() {
    return {
      Form: {
        username: "",
        password: ""
      }
    };
  }
};
</script>

 

3.數據校驗

　　1. 增加校驗規則 rules, prop:作用與el-form-item,表單域 model 字段，在使用 validate、resetFields 方法的情況下，該屬性是必填的

<template>
  <div class="form_container">
    <el-form :model="Form" :rules="FormRules" label-width="100px">
      <el-form-item prop="username" label="用戶名">
        <el-input v-model="Form.username"></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密碼">
        <el-input v-model="Form.password"></el-input>
      </el-form-item>
      <el-form-item class="btns">
        <el-button type="primary">校驗</el-button>
        <el-button type="info">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

　　2. 增加FormRules的數據對象：required 必填項， message：提示， trigger: "blur" 鼠標選中

FormRules: {
        username: [
          { required: true, message: "請輸入用戶名", trigger: "blur" }
        ],
        password: [{ required: true, message: "請輸入密碼", trigger: "blur" }]
      }

　　3. 檢查效果

 

4. 重置表單

　　1. resetField：對該表單項進行重置，將其值重置為初始值並移除校驗結果

　　2.對button綁定click事件

// tempalte
<el-button type="info" @click="resetForm">重置</el-button>

// 行為區新增重置方法
methods: {
    // 重置表單
    resetForm() {
      console.log(this);
    }
  }

　　3.增加ref 引用

<el-form :model="Form" :rules="FormRules" ref="FormRef" label-width="100px">

 

　　4. 重置方法

methods: {
    // 重置表單
    resetForm() {
      console.log(this);
      this.$refs.FormRef.resetFields()
    }
  }

　　

　　5.實現效果

 

5. 表單預驗證

　　1.validate: valid第一個為行參，返回布爾值，如果不通過False, 通過則是true

 // 預驗證
    validForm() {
        this.$refs.FormRef.validate( valid => {
            console.log(valid)
        })
    }

　　2. 實現效果

　　

github: https://github.com/wangxiao9/vue_coding.git

參考：https://element.faas.ele.me/#/zh-CN/component/form