小程序基础开发(四):weui-wxss组件表单页面,WxValidate.js组件表单验证上传
2020-02-06 01:28
651 查看
一,使用weui-wxss组件做一个表单页面
WeUI组件库简介
这是一套基于样式库weui-wxss开发的小程序扩展组件库,同微信原生视觉体验一致的UI组件库,由微信官方设计团队和小程序团队为微信小程序量身设计,令用户的使用感知更加统一。
项目背景
随着小程序的普及,微信也有很多内部小程序在开发,每个小程序都需要从零到1进行开发设计,而这个过程中,有大量的UI交互是重复的,另外,微信内部已经有一套H5版本的WeUI样式库。综合考虑,我们基于WeUI样式库开发了小程序版本的UI组件库,在内部多个小程序项目已经使用OK的情况下,我们把这套组件库开源让外部开发者也可以使用,欢迎大家Star以及提Issue。
<!--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在线入门教程-WeUi表单组件-uploader上传
- 微信小程序weui在线入门教程-WeUi基础组件-preview表单预览
- 微信小程序weui在线入门教程-WeUi表单组件-list列表
- 微信小程序weui在线入门教程-WeUi表单组件-slider滑块
- 小程序基础开发(四):template模板应用(2)——带裁剪功能的头像上传,封装wx.uploadFile组件
- vue2.0使用weui.js的uploader组件上传图片
- 小程序与WEB页面如何混合开发及WEUI那些事
- 微信小程序weui在线入门教程-WeUi表单组件-button按钮
- 微信小程序weui在线入门教程-WeUi基础组件-loadmore加载更多
- 微信小程序weui在线入门教程-WeUi基础组件-footer页脚
- 1.3.3微信小程序WeUI.js网页开发样式库
- 微信小程序weui在线入门教程-WeUi基础组件-icon图标
- 微信小程序weui在线入门教程-WeUi基础组件-panel面板
- 微信小程序WeUI.js网页开发样式库
- jQuery.validate.js表单验证
- jquery validate.js表单验证的基本用法入门
- jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因
- 关于validate验证表单与js语法的一个bug
- jquery.validate.js表单验证
- spring mvc + 表单异步验证插件 Validate.form.js