一,使用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}位以内的英文或者數字。'),