小程序基础开发(四):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组件表单验证上传相关推荐
- 解决uniapp小程序打包体积超过2M,提示包体积超过2M,“main packagexxx”,不给上传和预览的解决办法,绝对有效
解决办法,原文地址: 解决uniapp小程序打包体积超过2M,提示包体积超过2M,"main packagexxx",不给上传和预览的解决办法,绝对有效!在微信小程序开发中,为了解 ...
- 【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
开始前,请先完成圆梦宝典中滚动公告栏的开发,详见 [微信小程序-原生开发]实用教程 08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据 ...
- 【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航
开始前,请先完成项目创建,详见 [微信小程序-原生开发]实用教程01-注册登录账号,获取 AppID.下载安装开发工具.创建项目.上传体验 前期准备 因我们的项目是根据模板创建的,需先清理掉无效的页面 ...
- 【微信小程序】如何获取微信小程序云开发数据库的数据并渲染到页面?
前言 上一篇博客我把微信小程序云开发数据库操作(增删改查)的实现方法都已经分享出来啦,可以戳链接进去阅读哦 [微信小程序]小程序云开发实现数据库增删改查(小白速度Get起来!!一步步教你如何实现) 基 ...
- 小程序基础开发(三):授权,获取用户信息,注册,登录,简单封装request请求
一,授权 1,首先在app.js里检测用户是否授权 // 查看是否授权wx.getSetting({success: function (res) {if (res.authSetting['scop ...
- 小程序基础开发(五):微信支付全套流程
一,申请支付 商户在微信公众平台或开放平台提交微信支付申请,微信支付工作人员审核资料无误后开通相应的微信支付权限.微信支付申请审核通过后,商户在申请资料填写的邮箱中收取到由微信支付小助手发送的邮件,此 ...
- 微信小程序:从本地相册选择图片、相机拍照,并将所选图片上传到服务器
简介 小程序项目中有个需求:用户聊天时可以上传图片,还能支持拍照.于是学习了一下,分享给大家. 微信小程序中有个wx.chooseImage的方法可以快捷调用达到需求的效果. 具体实现 1.为了简化代 ...
- 小程序云开发——图片视频资源上传云端并返回云端路径
在现在的应用中,包括小程序,图片视频等元素是产品必不可少的一部分.如果一个产品仅支持文字,将会很单调.有时候我们需要将图片视频上传到云端或者服务器.我这里将介绍在小程序中怎么上传图片和视频到云端,并返 ...
- 2022年最新最全,零基础入门小程序云开发
开始之前 小程序基础课程:https://www.bilibili.com/video/BV1mF411b7tE?spm_id_from=333.999.0.0 大家可以加我微信QQ获取电子书版的配套 ...
最新文章
- sqlalchemy数据库中的offset偏移查询的使用
- SAP Retail MM41 维护商品主数据,报错 - 估价范围 NM01 还没有生产式的物料帐簿 – 之对策
- POJ1144:Network(无向连通图求割点)
- python控制苹果手机触摸屏失灵怎么办_iphone触摸屏失灵怎么办 iphone触摸屏失灵解决办法【详解】...
- Django内置的分页模块
- yelee主题修改博客左侧文章目录的按钮字体
- 灯也能玩出花样?炫彩灯带!
- 【python】filter()
- redlock java_分布式Redis的分布式锁Redlock
- HP-lefthand底层结构具体解释及存储灾难数据恢复
- ORACLE EXP/IMP的使用详解 (解决9i(window)导入到10G的乱码问题)
- Java RMI(远程方法调用)入门
- mtkwin10驱动_【MTK通用USB刷机驱动下载】MTK通用USB刷机驱动 Win7/Win10 自动安装版-开心电玩...
- 超宽带 DWM1000模块 应用
- 甜在心馒头店通过泊松分布解决备货烦恼
- cox回归模型python实现_cox回归模型python实现_生存分析Cox回归模型(比例风险模型)的spss操作实例...
- 【Photoshop抠图技巧】PS新手必备,七种高效好用的方法
- 添加了排比句的狗屁不通生成器
- WM开发常用资源下载 (转自黎波老师博客)
- node-sass报错
热门文章
- matlab画列车运行图,列车运行图常用画法的具体方法是什么?
- 110页智慧农业解决方案(农业信息化解决方案)(ppt可编辑)
- 1116. 【HNOI2008】T_OY(踢欧阳^_^) (Standard IO)斜率优化dp
- oh-my-zsh 强大漂亮的shell命令
- Unity2019最新科技VFX初探
- csv文件转换为txt格式
- SEO优化营销获客效果怎么样?
- AI理解不了“他她它”咋办?动词成为新突破口,机器人听到抹黄油就知道拿刀叉 | 清华AIR北大英特尔...
- php怎么会乱码,php中汉字乱码怎么办
- Ubuntu下certbot申请和部署证书