WxValidate——小程序表单验证(个人笔记)

下载地址：https://github.com/wux-weapp/wx-extend/blob/master/src/assets/plugins/wx-validate/WxValidate.js
文档：https://github.com/wux-weapp/wx-extend/blob/master/docs/components/validate.md

html部分

    <view class="edit_address">
        <form catchsubmit="handleSave">
            <view class="df user_item">
                <view class="address_title username">
                    收货人
                </view>
                <input class="weui-input" name="name" value="{{form.name}}" placeholder="请输入您的姓名" placeholder-style="font-size:32rpx;color:#ECECEC" bindinput="handleNameInput" />
            </view>
            <view class="df user_item">
                <view class="address_title phone">
                    手机号码
                </view>
                <input class="weui-input" name="phone" value="{{form.phone}}" placeholder="请输入您的手机号码" placeholder-style="font-size:32rpx;color:#ECECEC" bindinput="handlePhoneInput" />
            </view>
            <view class="df user_item area">
                <view class="address_title">
                    所属区域
                </view> 
                <picker class="picker_area" mode="region" name="region" bindchange="handleRegionChange" value="{{form.region}}" placeholder-style="font-size:32rpx;color:#ECECEC">
                    <view class="df">
                        <view class="picker">
                            {{form.region[0]}} {{form.region[1]}} {{form.region[2]}}
                        </view>
                        <image class="check_area" src="../../../assets/image/Triangle.png" />
                    </view>
                </picker>
            </view>
            <view class="address_detail">
                <input class="weui-input" name="detailed_address" value="{{form.detailed_address}}" placeholder="请输入详细地址" placeholder-style="font-size:32rpx;color:#ECECEC" bindinput="handleAddressInput" />
            </view>
            <view class="df address_setting">
                <view>
                    <view class="default">
                        设为默认地址
                    </view>
                    <view class="tips">
                        提醒：每次下单会默认推荐使用该地址
                    </view>
                </view>
                <switch checked="{{checked}}" color="#009cff" bindchange="handleSwitchChange"/>
            </view>
            <button class="save_btn df" style="line-height:80rpx" formType="submit">
                保存
            </button>
        </form> 
    </view>

js部分

import WxValidate from "../../../utils/wxValidate.js";
Page({

    /**
     * 页面的初始数据
     */
    data: {
        form: { // 要验证的需要放到form里面进行绑定
            name: '',
            phone: '',
            detailed_address: '',
            region: [],
        },
        code: [], // 省市区编码
        checked: true,
        address_id: ''
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
        //初始化表单验证规则
        this.initValidate()
    },
    initValidate() {
        let rules = {
            name: {
                required: true
            },
            phone: {
                required: true
            },
            region: {
                required: true
            },
            detailed_address: {
                required: true
            }
        }

        let message = {
                //属性名和表单的name保持一致
                name: {
                    required: '请输入您的姓名',
                },
                phone: {
                    required: "请输入您的手机号码"
                },
                region: {
                    required: "请选择收货地址"
                },
                detailed_address: {
                    required: "请输入详细地址"
                }
            }
            //实例化当前的验证规则和提示消息
        this.WxValidate = new WxValidate(rules, message);
    },
    handleNameInput(val) {
        this.setData({
            'form.name': val.detail.value
        })
    },
    handlePhoneInput(val) {
        this.setData({
            'form.phone': val.detail.value
        })
    },
    handleAddressInput(val) {
        this.setData({
            'form.detailed_address': val.detail.value
        })
    },
    handleRegionChange(val) {
        this.setData({
            'form.region': val.detail.value,
            code: val.detail.code
        })
    },
    handleSwitchChange(val) {
        this.setData({
            checked: val.detail.value
        })
    },
    handleSave(e) {
        let param = e.detail.value; // 检查的是对应的name,name一定要跟规则里面的字段对应
        if (!this.WxValidate.checkForm(param)) {
            //表单元素验证不通过，此处给出相应提示
            let error = this.WxValidate.errorList[0];
            wx.showToast({
                title: error.msg,
                icon: 'none',
                image: '',
                duration: 1500,
                mask: false
            });
            return false;
        }
        if (!this.data.form.region.length) { // 弹起地区选择器之后不选择，验证也通过了，不知道为什么，所以加一个验证
            wx.showToast({
                title: '请选择收货地址',
                icon: 'none',
                image: '',
                duration: 1500,
                mask: false
            });
            return false
        }
       // 验证通过的操作
        ...
    },
})