受欢迎的博客标签

wechat-微信小程序Asp .Net Core开发实战记录（32）-微信小程序表单Form的提交和取值

Published
Created: 2019年1月23日星期三 下午11:14:48 Latest updated:2020年9月4日星期五 下午1:50:15 views(1689)

1.1 表单使用的场景

1.1.1 单个输入控件的情况

     直接给 input 添加 bindinput，比如：<input bindinput="onUsernameInput" />，那么可以在 onUsernameInput 中直接使用 e.detail.value，即：

onUsernameInput : function(e) {
e.detail.value;
}

idcard
身份证类型的输入框

digit
带小数点的数字输入框

 

1.1.2 多个输入控件的情况用Form

如果有多个输入控件，我们不可能为每个控件添加 bindinput、bindchange 这类方法来获取值。这种情况下用Form

来提交。

1.1.3 表单设计步骤

第一步、添加 from 控件，并为其指定 bindsubmit 属性值。
第二步、添加输入控件到 form 中，并为其指定 name 属性值。
第三步、添加 button 控件，并为其指定 form-type="submit"。
第四步、在 js 中取值时，用 e.detail.value.xxx 或 e.detail.value["xxx"]，其中 xxx 为 name 属性值。

	<form bindsubmit="bindSave">

<input type="text" 中的 type 说明：

text：不必解释
number：数字键盘（无小数点）
idcard：数字键盘（无小数点、有个 X 键）
digit：数字键盘（有小数点） 
注意：number 是无小数点的，digit 是有小数点的。

 

number
<input name="Mobile" value="{{ Employee.Mobile}}" class="weui-input" type="number" placeholder="请输入手机号码" />

 

输入字段的数据类型校验

 

1.不论用户在input中输入什么数据类型，e.detail.value得到的值都是字符串。

2.js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是NaN(Not a Number)。


3.正则表达式判断一串字符QQ号码是不是全部是数字
 

//js
bindQQ:function(e){{
   // 判断一串字符是不是全部是数字
   var rex = /^[0-9]+$/;//正则表达式
   var flag = rex.test(e.detail.value);//通过表达式进行匹配
   if(!flag){
      wx.showToast({
         title: '请输入正确的qq格式',
         icon: 'loading',
         duration: 1000,
         mask:true
      })
      this.setData({
         qq:null
      })
  }else{
     this.setData({
      qq:e.detail.value
     })
   }
},

 

微信小程序数据类型
云开发数据库提供以下几种数据类型：

String：字符串
Number：数字
Object：对象
Array：数组
Bool：布尔值
Date：时间
Geo：多种地理位置类型，详见下
Null

 

微信小程序数据类型转换

1.字符串

字符串转成数字 [字符串必须全是数字]
//获取应用实例
const app = getApp()
Page({
  data: {
  },

  onLoad: function (options) {
    var strThree = "789456123";
    var numThree = parseInt(strThree);
    console.log(numThree);
  },
})

数组转成字符串

//index.js
//获取应用实例
const app = getApp()

Page({

  onLoad: function () {
    // 数组转成字符串
    var ojbA,objB;
    ojbA = new Array("age",1993,3,12);
    objB = ojbA.join("~");// 按照~转成字符串。当然也可以写成"",就是无间隔的转成字符串
    console.log(objB);
  },

})

字符串转成数组

//index.js
//获取应用实例
const app = getApp()

Page({

  onLoad: function () {

    // 字符串转成数组
    var strOne = "CoderZb,iOS开发,小程序开发";
    var arryOne = strOne.split(",");// 将字符串按照逗号分割成数组
    console.log(arryOne);

    var strTwo = "CoderZbiOS开发小程序开发";
    var arryTwo = strTwo.split('');// 将字符串按照空格分割成数组
    console.log(arryTwo);
  },

})

 

2.日期型

通常后台传递过来的都是时间戳，但是前台展示不能展示时间戳。需要转化。

获取当前时间并转换换字符串格式

用于Picker Date

onReady: function () {

    //获取当前时间并转换换字符串格式
    var dateNow = util.formatTime(new Date());
    this.setData({
      date: dateNow
    })

  },

 

微信小程序，new Date(‘2018-12-17 13:12’)在电脑上显示正常,用开发者工具进行真机调试的时候也正常。放到ios手机上会报错,时分秒都必须有.

ios的时间格式必须为 2018/12/17，ios不支持2018-12-17的写法,所以-必须都替换为/


 
var date = '2018-12-17 13:33'
 
Date.parse(new Date(date.replace(/-/g, '/')));

iOS系统对js中的new Date()方法有格式要求
let dt = new Date(“2019-07-24 19:57”)
// dt会返回valid Date
正确写法应该是
let dt = new Date(“2019/07/24 19:57”)
而实际应该过程中日期格式大部分都是2019-07-24这种，所以在实际应用过程中需要用正则对字符串进行预处理
let tm = “2019-07-24 19:57”
let dt = new Date(tm.replace(/-/g,’/’))

小程序添加名为filter.wxs的文件， wxml里时间戳转日期

https://www.jianshu.com/p/01db96b471b5

编写生成自定义日期云函数方法

https://blog.csdn.net/weixin_42684321/article/details/104608554

小程序wxml里面的时间格式化

https://blog.csdn.net/ZHFDBK/article/details/98882526


js

Page({

  /**
   * 页面的初始数据
   */
  data: {

    id: '',//修改用来保存_id
    Employee: {},
    EmployeeRoleList: [], //
    EmployeeRolePickerIndex: 0,  //默认显示位置
    EmployeeRoleSelected: {}, //选中的项
    isEditStatus: false, // 是否在编辑状态

  },

XML

<!--miniprogram/pages/adminEmployee/Employee/_CreateOrUpdate/index.wxml-->
<view class="page">
	<view class="page__bd">
		<form bindsubmit="bindSave">
			<!--错误提示-->
			<view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">{{textTopTips}}</view>

			<!--表单-->
			<view class="weui-cells__title" wx:if="{{isEditStatus}}">编辑记录</view>
			<view class="weui-cells__title" wx:if="{{!isEditStatus}}">添加记录</view>


			<view class="weui-cells">
				<view class="weui-cell weui-cell_active">
					<view class="weui-cell__hd" style="position: relative; margin-right: 10px;">
						<image src="{{Employee.UserInfo.avatarUrl}}" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
						<text class="weui-badge" style="position: absolute; top: -0.4em; right: -0.4em;">8</text>
					</view>
					<view class="weui-cell__bd">
						<view>昵称{{Employee.UserInfo.nickName}}</view>
						<view style="font-size: 13px; color: #888;">摘要信息</view>
					</view>
				</view>
			</view>

			<view class="weui-cells">
				<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="UserName_zh_CN" value="{{Employee.UserName_zh_CN}}" class="weui-input" type="text" 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="Mobile" value="{{ Employee.Mobile}}" class="weui-input" type="tel" placeholder="请输入手机号码" />
					</view>
				</view>

			</view>

			<!--员工角色选择-->

			<view class="weui-cell weui-cell_select">

				<view class="weui-cell__hd">
					<view class="weui-label">员工角色</view>
				</view>

				<view class="weui-cell__bd">
					<picker bindchange="bindPickerChangeEmployeeRole" name="Name" value="{{EmployeeRolePickerIndex}}" range="{{EmployeeRoleList}}" range-key="Name">
						<view class="weui-select weui-select_in-select-after">{{EmployeeRoleList[EmployeeRolePickerIndex].Name}}</view>
					</picker>
				</view>
			</view>

			<!--不可修改信息-->
			<view class="weui-form-preview__bd">
				<view class="weui-form-preview__item">
					<label class="weui-form-preview__label">用户昵称</label>
					<text class="weui-form-preview__value">{{Employee.UserInfo.nickName}}</text>
				</view>
				<view class="weui-form-preview__item">
					<label class="weui-form-preview__label">Unionid</label>
					<text class="weui-form-preview__value">{{Employee.AuthorUnionid}}</text>
				</view>
				<view class="weui-form-preview__item">
					<label class="weui-form-preview__label">_openid</label>
					<text class="weui-form-preview__value">{{Employee.AuthorOpenid}}</text>
				</view>
			</view>

			<!-- 按钮 -->
			<view class="weui-btn-area">
				<button class="weui-btn" type="primary" formType="submit" wx:if="{{!isEditStatus}}">添加</button>
				<button class="weui-btn" type="primary" formType="submit" wx:if="{{isEditStatus}}">确认修改</button>


			</view>

			<!-- 广告 -->
			<!-- <view class="weui-ad-area" wx:if="{{adFunctionConfig.enable}}">
        <ad unit-id="adunit-bfe68df45d61cc37" ad-intervals="30"></ad>
      </view> -->
		</form>
	</view>
</view>

 

JS

  //保存
  bindSave: function (e) {

    var that = this;

    console.log('form发生了submit事件，携带数据为：', e.detail.value);

    //字段校验
    if (JSON.stringify(this.data.Employee.EmployeeRoles) == "{}") {
      wx.showToast({
        title: '请选择员工的身份',
        icon: 'none'
      })

      return
    }




    let isEditStatus = that.data.isEditStatus;

    //对象赋值
    let employee = that.data.Employee;

    console.log(configCollection.Employee + ":编辑后的记录内容", employee)
    const db = wx.cloud.database() //打开数据库连接
    //---直接对data赋值，不会引起界面刷新---

    employee.UpdatedOnUtc = db.serverDate();
    employee.UserName_zh_CN = e.detail.value.UserName_zh_CN;



    //避免在直接对 Page.data 进行赋值修改，使用 Page.setData 进行操作才能将数据同步到页面中进行渲染

    this.setData({ employee })
    this.setData({

      ["productCategory.UserName_zh_CN"]: e.detail.value.UserName_zh_CN,
      ["productCategory.Mobile"]: e.detail.value.Mobile,
      ["productCategory.IsEmployeeAuthorized"]: e.detail.value.IsEmployeeAuthorized,
      

    })

    console.log('form发生了submit事件，携带数据为：', e.detail.value);


    //let productCategory = e.detail.value
    if (!isEditStatus) { //id等于空是新增数据
      this.onCreate() //新增记录
      console.log("新增记录" + configCollection.Employee, e)
    } else {
      //this.update(db, productCategory) //修改记录
      this.onUpdate();
      console.log(configCollection.Employee + ":修改记录", e)
    }
  },