小程序表单校验设计

效果图

validator.js

export const validator = (formValues, rulesArr) => {
  for (const key in formValues) {
    if (Object.hasOwnProperty.call(formValues, key)) {
      const data = formValues[key];
      const ruleData = rulesArr.find((ele) => ele.name === key);
      if (!ruleData) {
        continue;
      }
      const { rules } = ruleData;
      if (Object.prototype.toString.call(rules) === "[object Object]") {
        const { required, message } = rules;
        if (required && !data) {
          return message;
        }
      }
      if (Object.prototype.toString.call(rules) === "[object Array]") {
        for (const itemRule of rules) {
          const { required, message, pattern, validator } = itemRule;
          var re = pattern && new RegExp(pattern);
          if (required && !data) {
            return message;
          }
          if (pattern && data && !re.test(data)) {
            return message;
          }
          if (validator && data && !validator(data, formValues)) {
            return message;
          }
        }
      }
    }
  }
  return;
}

index.wxml

<view class="add-card">
    <view class="card-item">
        <view class="card-title">
            持卡人姓名
            <em class="item-xing">*</em>
        </view>
        <van-field custom-style="margin-bottom:10px" clearable model:value="{{ nickName }}" placeholder="请输入持卡人姓名" border="{{ false }}" />
    </view>
    <view class="card-item">
        <view class="card-title">
            银行卡卡号
            <em class="item-xing">*</em>
        </view>
        <van-field custom-style="margin-bottom:10px" clearable model:value="{{ cardNo }}" bind:change='getUserIdCardNo' placeholder="请输入卡号" type="number" border="{{ false }}" />
    </view>
    <view class="card-item">
        <view class="card-title">
            银行卡类型
            <em class="item-xing">*</em>
        </view>
        <van-field custom-style="margin-bottom:10px" readonly value="{{ cardType }}" disabled placeholder="根据银行卡号自动识别的卡号类型" border="{{ false }}" />
    </view>
    <view class="card-item">
        <view class="card-title">
            银行预留手机号
            <em class="item-xing">*</em>
        </view>
        <van-field custom-style="margin-bottom:10px" clearable type="number" model:value="{{ mobile }}" bind:change='getUserIdCardPhone' placeholder="请输入银行预留手机号" border="{{ false }}" />
        <van-field type="number" model:value="{{ code }}" center clearable placeholder="请输入短信验证码" border="{{ false }}" use-button-slot>
            <send-verification-code slot="button" mobileNo="{{mobile}}" checkPhone="false" />
        </van-field>
    </view>
    <van-button custom-style="margin-top:50px;border-radius:10px" color="#23B0DD" block bindtap="submit" loading="{{loading}}">
        完成
    </van-button>
</view>

index.js

let util = require('../../../../utils/bankCardAttribution');
import { validator } from "../../../../utils/validator";

Page({
    data: {
        nickName: "",
        cardNo: "",
        mobile: "",
        code: "",
        loading: false,
        cardType: '',
    },
    rules: [
        {
            name: "nickName",
            rules: { required: true, message: "请输入持卡人姓名" },
        },
        {
            name: "cardNo",
            rules: { required: true, message: "请输入银行卡卡号" },
        },
        {
            name: "cardType",
            rules: { required: true, message: "银行卡卡号不正确" },
        },
        {
            name: "mobile",
            rules: [
                { required: true, message: "请输入手机号" },
                {
                    pattern: "^[1]([3-9])[0-9]{9}$",
                    message: "请输入正确的手机号",
                },
            ],
        },
        {
            name: "code",
            rules: [{ required: true, message: "请输入验证码" }],
        },
    ],
    getUserIdCardNo (e) {
        // 校验银行卡号
        var temp = util.bankCardAttribution(e.detail)
        if (temp == 'error') {
            this.setData({
                cardType: '',
            })
        }
        else {
            this.setData({
                cardType: temp.bankName + temp.cardTypeName,
            })
        }
    },
    submit () {
        try {
            this.setData({
                loading: true,
            });
            const { nickName, cardNo, cardType, mobile, code } = this.data;
            const form = { nickName, cardNo, cardType, mobile, code }
            const errorText = validator(form, this.rules);
            if (errorText) {
                wx.showToast({
                    title: errorText,
                    icon: "none",
                });
                return;
            }
            // 发送请求
        } catch (e) {

        } finally {
            this.setData({
                loading: false,
            });
        }
    }
})