小程序表单校验uni-forms正确使用方式及避坑指南

小程序表单校验uni-forms正确使用方式及避坑指南

一、前言

小程序上使用表单理应是很常用，也很必须的功能，因为系统实用了uni-app，所以这时候会用到uni-forms，但使用过程中遇到不少问题。
这边的需求有3个：

1. 即时校验（输入框失焦立即校验值）
2. 需自定义校验规则
3. 需要异步校验

满足这3个需求，就能实现绝大部分表单校验，然而直接使用官方的案例并不能满足，踩过不少坑，最后解决方案如下。

二、成果展示

以下展示均满足上述3个需求，下面示例代码可以直接看 第六点

三、uni-forms即时校验

实现即时校验，uni-forms需要加

validate-trigger="bind"

，同时input添加

@blur="binddata('字段名', $event.detail.value)"

示例：

<uni-formsref="form":modelValue="ruleForm"validate-trigger="bind"><uni-forms-itemlabel="账号"name="account"><inputv-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-formsref="form":modelValue="ruleForm"validate-trigger="bind">
    ......
  </uni-forms></template><script>exportdefault{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)){returncallback("邮箱不正确");}callback();},},};</script>

五、uni-forms异步校验

通常使用异步方法来校验账号是否重复等，步骤：

1. 首先需要自定义校验方法validateFunction: this.checkAccount
2. 然后进行常规的规则校验
3. 再进行异步方法校验账号唯一性 需要使用Promise，校验通过使用 return resolve() 校验失败使用 return reject(new Error('错误提示信息'))

示例（核心代码部分）：

exportdefault{data(){return{// 校验规则rules:{account:{rules:[{required:true,errorMessage:'请输入您的账号',},{validateFunction:this.checkAccount,},],},},};},methods:{// 表单验证账号checkAccount(rule, value){returnnewPromise((resolve, reject)=>{// 先进行规则校验if(value ===''||!verifyAccount(value)){returnreject(newError('只能输入4-30位英文、数字、下划线'))}// 再进行异步校验，checkUser为本系统api异步方法，结合你系统使用你自己的方法apiCheckAccount({account: value }).then((data)=>{if(data.exist){returnreject(newError('账号已存在'))}resolve()}).catch((err)=>{returnreject(newError(err.message))})})},},

六、完整示例源码

<template><viewclass="register"><viewclass="title">最实用表单校验</view><uni-formsref="form":modelValue="ruleForm"validate-trigger="bind"label-width="40"><uni-forms-itemlabel="账号"name="account"><inputv-model.trim="ruleForm.account"@blur="binddata('account', $event.detail.value)"placeholder="请输入您的登录账号"/></uni-forms-item><uni-forms-itemlabel="姓名"name="name"><inputv-model.trim="ruleForm.name"@blur="binddata('name', $event.detail.value)"placeholder="请输入您的姓名"/></uni-forms-item><uni-forms-itemclass="form-item-center"><buttontype="primary"@click="submit()">注册</button></uni-forms-item></uni-forms></view></template><script>import{ apiCheckAccount }from'@/api'import{ verifyAccount, verifyName }from'@/utils'exportdefault{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){returnnewPromise((resolve, reject)=>{// 先进行规则校验if(value ===''||!verifyAccount(value)){returnreject(newError('只能输入4-30位英文、数字、下划线'))}// 再进行异步校验，checkUser为本系统api异步方法，结合你系统使用你自己的方法apiCheckAccount({account: value }).then((data)=>{if(data.exist){returnreject(newError('账号已存在'))}resolve()}).catch((err)=>{returnreject(newError(err.message))})})},// 验证姓名checkName(rule, value, allData, callback){if(!verifyName(value)){returncallback('只能输入1-30位中英文和数字')}callback()},},}</script>

七、最后，点个赞

如果帮到你，点个赞再走嘛 ：)