全能編程開發工程師指南：uniapp表單組件詳解

一、uniappform表單校驗

<template>
  <form @submit="onSubmit">
    <input type="text" v-model="name" name="name" required>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: "",
    };
  },
  methods: {
    onSubmit() {
      if (!this.$refs.form.checkValidity()) {
        return;
      }
      console.log("提交成功！");
    },
  },
};
</script>

上面是一個基礎的表單校驗例子。通過在input元素中添加required屬性，可以讓該元素成為必填項，同時使用checkValidity()方法判斷用戶是否填寫了必填項以及填寫是否合法。

二、uniappform表單必填驗證

<template>
  <form @submit="onSubmit">
    <input type="text" v-model="name" name="name" required>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: "",
    };
  },
  methods: {
    onSubmit() {
      if (!this.name) {
        alert("請填寫您的姓名");
        return;
      }
      console.log("提交成功！");
    },
  },
};
</script>

通過在js代碼中判斷必填項是否填寫，如果為空，彈出提示信息，保證必填項填寫後才能進行表單提交。

三、uniappform表單必填

<template>
  <form>
    <label>姓名</label>
    <input type="text" v-model="name" name="name" required>
    <label>年齡</label>
    <input type="number" v-model="age" name="age" required>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      age: "",
    };
  },
};
</script>

上面的例子中我們設置了兩個必填項：姓名和年齡，這樣用戶必須同時填寫這兩個信息才能進行提交，否則會被攔截。

四、uniapp表單模板

<template>
  <form @submit="onSubmit">
    <div>
      <label>姓名</label>
      <input type="text" v-model="name" name="name">
    </div>
    <div>
      <label>年齡</label>
      <input type="number" v-model="age" name="age">
    </div>
    <div>
      <button type="submit">提交</button>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      age: "",
    };
  },
  methods: {
    onSubmit() {
      console.log("姓名：" + this.name);
      console.log("年齡：" + this.age);
    },
  },
};
</script>

我們可以將表單拆分成多個模板，這樣可以使表單更加清晰。以上為一個標準的表單模板，包括了姓名和年齡的輸入框，並且在表單提交的時候打印出姓名和年齡的值。

五、uniapp表單組件

<template>
  <form-component>
    <field type="text" label="姓名" v-model="name" required></field>
    <field type="number" label="年齡" v-model="age"></field>
    <button type="primary" @click="onSubmit">提交</button>
  </form-component>
</template>

<script>
import FormComponent from "@/components/Form";

export default {
  components: {
    "form-component": FormComponent,
  },
  data() {
    return {
      name: "",
      age: "",
    };
  },
  methods: {
    onSubmit() {
      console.log("姓名：" + this.name);
      console.log("年齡：" + this.age);
    },
  },
};
</script>

uniapp通過Form Component組件提供了高度可定製化的表單組件，該組件可以幫助我們更快速地搭建表單。在上面的例子中，我們引入了Form Component組件，並且使用了Field組件來構造輸入框。

六、uniapp表單提交

<template>
  <form-component>
    <field type="text" label="姓名" v-model="name" required></field>
    <field type="number" label="年齡" v-model="age"></field>
    <button type="primary" @click="submitForm">提交</button>
  </form-component>
</template>

<script>
import FormComponent from "@/components/Form";

export default {
  components: {
    "form-component": FormComponent,
  },
  data() {
    return {
      name: "",
      age: "",
    };
  },
  methods: {
    submitForm() {
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          console.log("提交成功");
        } else {
          console.log("表單校驗失敗");
          return false;
        }
      });
    },
  },
};
</script>

在表單提交之前，我們需要對它的合法性進行校驗。使用Form Component提供的validate方法即可完成表單校驗，該方法接收一個回調函數作為參數，其中valid表示表單是否已經合法。在上面的例子中，如果表單合法，我們就打印出「提交成功」的提示信息。