uniapp携带图片提交表单（小程序表单校验uni-forms正确使用方式及避坑指南）
一 、前言
小程序上使用表单理应是很常用 ，也很必须的功能 ，因为系统实用了uni-app ，所以这时候会用到uni-forms ，但使用过程中遇到不少问题 。
这边的需求有3个： 即时校验（输入框失焦立即校验值） 需自定义校验规则 需要异步校验满足这3个需求 ，就能实现绝大部分表单校验 ，然而直接使用官方的案例并不能满足 ，踩过不少坑 ，最后解决方案如下 。
二 、成果展示
以下展示均满足上述3个需求 ，下面示例代码可以直接看 第六点
三 、uni-forms即时校验
实现即时校验 ，uni-forms需要加validate-trigger="bind" ，同时input添加@blur="binddata(字段名, $event.detail.value)"
示例： <uni-forms ref="form" :modelValue="ruleForm" validate-trigger="bind"> <uni-forms-item label="账号" name="account"> <input v-model.trim="ruleForm.account" @blur="binddata(account, $event.detail.value)" placeholder="请输入您的登录账号" /> </uni-forms-item> </uni-forms>四 、uni-forms自定义校验规则
需要自定义校验规则时 ，去掉uni-forms的:rules ，同时onReady里加this.$refs.form.setRules(this.rules) ，其中validateFunction: this.checkEmail为自定义校验方法
示例： <template> <uni-forms ref="form" :modelValue="ruleForm" validate-trigger="bind"> ...... </uni-forms> </template> <script> export default { data() { return { // 校验规则 rules: { email: { rules: [ { validateFunction: this.checkEmail, }, ], }, }, }; }, onReady() { // 需要在onReady中设置规则 this.$refs.form.setRules(this.rules); }, methods: { /** * 表单验证邮箱 */ checkEmail(rule, value, allData, callback) { if (value !== "" && !verifyEmail(value)) { return callback("邮箱不正确"); } callback(); }, }, }; </script>五 、uni-forms异步校验
通常使用异步方法来校验账号是否重复等 ，步骤：
首先需要自定义校验方法validateFunction: this.checkAccount 然后进行常规的规则校验 再进行异步方法校验账号唯一性
需要使用Promise ，校验通过使用 return resolve()
校验失败使用 return reject(new Error(错误提示信息))示例（核心代码部分）：
export default { data() { return { // 校验规则 rules: { account: { rules: [ { required: true, errorMessage: 请输入您的账号, }, { validateFunction: this.checkAccount, }, ], }, }, }; }, methods: { // 表单验证账号 checkAccount(rule, value) { return new Promise((resolve, reject) => { // 先进行规则校验 if (value === || !verifyAccount(value)) { return reject(new Error(只能输入4-30位英文 、数字 、下划线)) } // 再进行异步校验 ，checkUser为本系统api异步方法 ，结合你系统使用你自己的方法 apiCheckAccount({ account: value }) .then((data) => { if (data.exist) { return reject(new Error(账号已存在)) } resolve() }) .catch((err) => { return reject(new Error(err.message)) }) }) }, },六 、完整示例源码
<template> <view class="register"> <view class="title">最实用表单校验</view> <uni-forms ref="form" :modelValue="ruleForm" validate-trigger="bind" label-width="40"> <uni-forms-item label="账号" name="account"> <input v-model.trim="ruleForm.account" @blur="binddata(account, $event.detail.value)" placeholder="请输入您的登录账号" /> </uni-forms-item> <uni-forms-item label="姓名" name="name"> <input v-model.trim="ruleForm.name" @blur="binddata(name, $event.detail.value)" placeholder="请输入您的姓名" /> </uni-forms-item> <uni-forms-item class="form-item-center"> <button type="primary" @click="submit()">注册</button> </uni-forms-item> </uni-forms> </view> </template> <script> import { apiCheckAccount } from @/api import { verifyAccount, verifyName } from @/utils export default { data() { return { // 表单数据 ruleForm: { account: , // 账号 name: , // 姓名 }, rules: {}, } }, onReady() { this.setRules() // 需要在onReady中设置规则 this.$refs.form.setRules(this.rules) }, methods: { // 提交表单 submit() { this.$refs.form .validate() .then(() => { uni.showToast({ title: 注册成功！, duration: 2000, icon: success, }) }) .catch((err) => { console.log(表单校验失败：, err) }) }, // 设置校验规则 setRules() { this.rules = { account: { rules: [ { required: true, errorMessage: 请输入您的账号, }, { validateFunction: this.checkAccount, }, ], }, name: { rules: [ { required: true, errorMessage: 请输入您的姓名, }, { validateFunction: this.checkName, }, ], }, } }, // 验证账号 checkAccount(rule, value) { return new Promise((resolve, reject) => { // 先进行规则校验 if (value === || !verifyAccount(value)) { return reject(new Error(只能输入4-30位英文 、数字 、下划线)) } // 再进行异步校验 ，checkUser为本系统api异步方法 ，结合你系统使用你自己的方法 apiCheckAccount({ account: value }) .then((data) => { if (data.exist) { return reject(new Error(账号已存在)) } resolve() }) .catch((err) => { return reject(new Error(err.message)) }) }) }, // 验证姓名 checkName(rule, value, allData, callback) { if (!verifyName(value)) { return callback(只能输入1-30位中英文和数字) } callback() }, }, } </script>七 、最后 ，点个赞
如果帮到你 ，点个赞再走嘛 ：)
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！