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

  • A+
所属分类: Vue 综合应用

一、前言

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

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

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

二、成果展示

以下展示均满足上述3个需求,下面示例代码可以直接看 第六点
小程序表单校验uni-forms正确使用方式及避坑指南

三、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异步校验

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

  1. 首先需要自定义校验方法validateFunction: this.checkAccount
  2. 然后进行常规的规则校验
  3. 再进行异步方法校验账号唯一性
    需要使用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>

七、最后,点个赞

如果帮到你,点个赞再走嘛 :)

w3cjava

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: