全能编程开发工程师指南：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表示表单是否已经合法。在上面的例子中，如果表单合法，我们就打印出“提交成功”的提示信息。