小程序基礎開發（四）：weui-wxss組件表單頁面，WxValidate.js組件表單驗證上傳

一，使用weui-wxss組件做一個表單頁面

WeUI組件庫簡介
這是一套基於樣式庫weui-wxss開發的小程序擴展組件庫，同微信原生視覺體驗一致的UI組件庫，由微信官方設計團隊和小程序團隊爲微信小程序量身設計，令用戶的使用感知更加統一。

項目背景
隨着小程序的普及，微信也有很多內部小程序在開發，每個小程序都需要從零到1進行開發設計，而這個過程中，有大量的UI交互是重複的，另外，微信內部已經有一套H5版本的WeUI樣式庫。綜合考慮，我們基於WeUI樣式庫開發了小程序版本的UI組件庫，在內部多個小程序項目已經使用OK的情況下，我們把這套組件庫開源讓外部開發者也可以使用，歡迎大家Star以及提Issue。

下載地址weui-wxss
官方說明文檔簡介
wxml

<!--pages/user/user_info/user_info.wxml-->
<!--pages/visitor/user_info/user_info.wxml-->
<view class="page">
    <form report-submit='true' bindsubmit="formSubmit">
        <view class="weui-cell weui-cell_input">
          <image mode="aspectFill" class='user_img' src='{{comp_img}}' bindtap='change_img'></image>
        </view>

        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell weui-cell_input">
              <view class="weui-cell__hd">
                  <view class="weui-label">姓氏</view>
              </view>
              <view class="weui-cell__bd">
                  <input name="comp_surname" disabled='{{disabled}}' value="{{comp_surname}}" class="weui-input" placeholder=""/>
              </view>
          </view>

          <view class="weui-cell weui-cell_input">
              <view class="weui-cell__hd">
                  <view class="weui-label">名字</view>
              </view>
              <view class="weui-cell__bd">
                  <input name="comp_name" disabled='{{disabled}}' value="{{comp_name}}" class="weui-input" placeholder=""/>
              </view>
          </view>

          <view class="weui-cell weui-cell_input">
              <view class="weui-cell__hd">
                  <view class="weui-label">E-mail</view>
              </view>
              <view class="weui-cell__bd">
                  <input value='{{comp_email}}' name='comp_email' class="weui-input" placeholder=""/>
              </view>
          </view>

          <view class="weui-cell weui-cell_input">
              <view class="weui-cell__hd">
                  <view class="weui-label">手機</view>
              </view>
              <view class="weui-cell__bd">
                  <input value="{{comp_mobile}}" name="comp_mobile" class="weui-input" placeholder=""/>
              </view>
          </view>
        </view>

        <view class="weui-cells__title">性別</view>
        <view class="weui-cells weui-cells_after-title">
            <radio-group name="comp_sex">
                <label class="weui-cell weui-check__label"  wx:for="{{arrSex}}" wx:key="index">
                    <radio value="{{item.id}}" checked="{{item.checked}}"/>
                    <view class="weui-cell__bd">{{item.val}}</view>
                </label>
            </radio-group>
        </view>

        <view class="weui-cells__title">職業</view>
        <view class="weui-cells weui-cells_after-title">
            <radio-group name="usgu_class">
                <label class="weui-cell weui-check__label"  wx:for="{{arrGuideClass}}" wx:key="index">
                    <radio value="{{item.id}}" checked="{{item.checked}}"/>
                    <view class="weui-cell__bd">{{item.val}}</view>
                </label>
            </radio-group>
        </view>

        <view class="weui-cells__title">擅長語言(非必選項)</view>
        <view class="weui-cells weui-cells_after-title">
            <checkbox-group name="usgu_foreign_language">
                <label class="weui-cell weui-check__label" wx:for="{{arrLanguageClass}}"  wx:key="index">
                    <checkbox  value="{{item.id}}" checked="{{item.checked}}"/> 
                    <view class="weui-cell__bd">{{item.val}}</view>
                </label>
            </checkbox-group>
        </view>

        <view class="weui-cells__title">居住城市</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_select">
                <view class="weui-cell__bd">
                    <picker name="comp_work_pcp" mode="multiSelector" bindchange="func_changeCitysChange" bindcolumnchange="func_changeCitysChangeColumn" value="{{ citysIndex }}" range="{{ cityArray }}">
                        <view class="weui-select">{{address?address:'請選擇'}}</view>
                    </picker>
                </view>
            </view>
        </view>

        <view class="weui-cells__title">籍貫</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_select">
                <view class="weui-cell__bd">
                    <picker name="comp_birth_pcp" mode="multiSelector" bindchange="func_changeCitysChange_b" bindcolumnchange="func_changeCitysChangeColumn_b" value="{{ citysIndex_b }}" range="{{ cityArray }}">
                        <view class="weui-select">{{address_b?address_b:'請選擇'}}</view>
                    </picker>
                </view>
            </view>
        </view>

        <!--view class="weui-cells__title">詳細地址</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell">
                <view class="weui-cell__bd">
                    <textarea class="weui-textarea" name="comp_work_address" value='{{comp_work_address}}' />
                </view>
            </view>
            
        </view-->

        <view class="space-between">
          <view class="weui-cells__title">證件</view>
          <view class="weui-cells__title" bindtap="imgStyle"><view class="help_tab"><icon class='iconfont position_bottom3 icon-wenhao font_bold'></icon>證件規範</view></view>
         
        </view>

        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell weui-cell_input">
            <view class="weui-cell__hd">
                <view class="weui-label">資格證號</view>
            </view>
            <view class="weui-cell__bd">
                <input value="{{usgu_guide_card}}" disabled='{{disabled}}' maxlength='22' name="usgu_guide_card" class="weui-input" placeholder="請輸入導遊證號碼"/>
            </view>
          </view>
        

          <view class="weui-cell weui-cell_input">
              <view class="weui-cell__hd">
                  <view class="weui-label">證件照片</view>
              </view>
              <view class="weui-cell__bd">
                  <image bindtap='up_img' mode='aspectFit' class='usgu_guide_cardImg' src='{{usgu_guide_cardImg}}'></image>
              </view>
          </view>
        </view>

        <checkbox-group bindchange="bindAgreeChange" name='read'>
            <label class="weui-agree">
                <view class="weui-agree__text">
                    <checkbox class="weui-agree__checkbox" id="weuiAgree" value="{{read}}" checked="{{isAgree}}" />
                    <view class="weui-agree__checkbox-icon">
                        <icon class="weui-agree__checkbox-icon-check" type="success_no_circle" size="9" wx:if="{{isAgree}}"></icon>
                    </view>
                    <text class='font_black font30'> 同意相關的法律法規，並對提供的信息負責</text>
                </view>
            </label>
        </checkbox-group>
        <view class='kong20'></view>
        <view class="text_center font28 font_hui">注意:審覈通過後，不能修改姓名，證件號和證件照。</view>
        <button form-type='submit' class="submit">確定</button>   
    </form>
</view>

wxss

 @import '../../../weui.wxss';

textarea{
  height: 120rpx;
  border: 1px #ccc solid;
}
.change_img{
  background-color: rgb(124, 124, 124);
  padding: 0px 10px;
  color: #fff;
  border-radius: 2px;
}
.user_img{
    height: 200rpx;
    width: 200rpx;
    margin: 5px auto;
}

.submit {
    background-color: #1296DB;
    color: #fff;
}
.usgu_guide_cardImg{
  max-width: 300rpx;
  max-height: 600rpx;
  margin: 3px auto;
}

二，引用WxValidate.js組件驗證表單以及自定義驗證條件

下載地址WxValidate.js

創建規則和提示

    // 驗證規則
    const rules = {
      comp_surname: {
        required: true,
        maxlength: [5],
        Chinese: true
      },
      comp_name: {
        required: true,
        maxlength: [6],
        Chinese: true
      },
      comp_work_address:{
        required: true,
        maxlength: [30],
      },
      comp_email: {
        required: true,
        email: true,
      },
      comp_mobile: {
        required: true,
        tel: true,
      },
      usgu_guide_card:{
        required: true,
        maxlength: [22],
        EnglishNum: true,
      }
      // 配置false可關閉驗證
    };
    // 驗證提示信息
    const messages = {
      comp_surname: {
        Chinese: '姓氏只能爲漢字',
        maxlength: '姓氏不可超過5個字',
        required:'姓氏不可爲空'
      },
      comp_name: {
        Chinese: '名字只能爲漢字',
        maxlength: '名字不可超過5個字',
        required:'名字不可爲空'
      },
      comp_work_address:{
        maxlength: '詳細地址不可超過30個字',
        required:'地址不可爲空'
      },
      usgu_guide_card:{
        maxlength: '資格證號不可超過22個字符',
        EnglishNum:'資格證號只能輸入英文或者數字'
        required:'證件不可爲空'
      }
    };

    // 創建實例對象
    this.WxValidate = new WxValidate(rules, messages)

過濾，驗證
不符合條件的都會彈出窗消息提示錯誤

formSubmit: function (e) {
    var that = this;
    console.log(e.detail.value);
    if (!this.WxValidate.checkForm(e.detail.value)) {
      const error = this.WxValidate.errorList[0]
      wx.showModal({
        content: error.msg,
        showCancel: false,
      })
      return false
    }
    else
    {
		//上傳
	}
}

如果希望空值時是wx.showToast消息框提示，則可以關閉required驗證，在過濾條件時判斷字段值的長度

  formSubmit: function (e) {
    var that = this;
    console.log(e.detail.value);
    if (!this.WxValidate.checkForm(e.detail.value)) {
      const error = this.WxValidate.errorList[0]
      wx.showModal({
        content: error.msg,
        showCancel: false,
      })
      return false
    }
    else if (e.detail.value.comp_surname.length == 0) {
      wx.showToast({
        title: '請填寫姓氏!',
        icon: 'loading',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    }
    else if (e.detail.value.comp_name.length == 0) {
      wx.showToast({
        title: '請填寫名字!',
        icon: 'loading',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    }
    else if (e.detail.value.comp_sex.length == 0) {
      wx.showToast({
        title: '請選擇性別!',
        icon: 'loading',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    }
    else if (e.detail.value.comp_mobile.length == 0) {
      wx.showToast({
        title: '請填寫電話!',
        icon: 'loading',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    }
    else if (e.detail.value.comp_work_pcp.length == 0) {
      wx.showToast({
        title: '請選擇地址!',
        icon: 'loading',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    }
    else if (e.detail.value.comp_birth_pcp.length == 0) {
      wx.showToast({
        title: '請選擇籍貫!',
        icon: 'loading',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    }
    else if (e.detail.value.usgu_class.length == 0) {
      wx.showToast({
        title: '請選擇職業!',
        icon: 'loading',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    }  
    else if (e.detail.value.usgu_guide_card.length == 0) {
      wx.showToast({
        title: '請填寫資格證號!',
        icon: 'loading',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    }
    else if (e.detail.value.read.length == 0) {
      wx.showToast({
        title: '請同意相關條款',
        icon: 'loading',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    }
    else {
    	//提交
    }
}

添加自定義條件
在/*** 初始化默認驗證方法*/that.methods裏添加正則

/**只能輸入漢字 */
            Chinese(value) {
              return that.optional(value) || /^[\u4e00-\u9fa5]+$/.test(value)
            },
            /**只能輸入英文和數字 */
            EnglishNum(value){
              return that.optional(value) || /^[0-9a-zA-Z]+$/.test(value)
            }

在/*** 初始化默認提示信息*/this.defaults裏添加提示

Chinese: this.formatTpl('請輸入{0}位以內的漢字。'),
EnglishNum: this.formatTpl('請輸入{0}位以內的英文或者數字。'),

小程序基礎開發（四）：weui-wxss組件表單頁面，WxValidate.js組件表單驗證上傳

一，使用weui-wxss組件做一個表單頁面

二，引用WxValidate.js組件驗證表單以及自定義驗證條件

Python 潮流週刊#50：我最喜歡的 Python 3.13 新特性！

小程序基礎開發（三）：授權，獲取用戶信息，註冊，登錄，簡單封裝request請求

小程序基礎開發（一）：配置tab底部欄頁面，page和component的區別，使用component自定義頭部組件樣式和底部導航

小程序基礎開發（四）：template模板應用(2)——帶裁剪功能的頭像上傳，封裝wx.uploadFile組件

小程序基礎開發（四）：template模板應用(3)——日曆組件，可賦值參數(價格、銷量等)

小程序基礎開發（二）：頁面數據渲染，多重for循環列表渲染。附字母索引的聯繫人列表dome

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結