一、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表示表单是否已经合法。在上面的例子中，如果表单合法，我们就打印出“提交成功”的提示信息。
