其他分享
首页 > 其他分享> > uniapp form表单提交,数据格式验证

uniapp form表单提交,数据格式验证

作者:互联网

uniapp form表单提交,数据格式验证

前端页面

		<view class="container">
			<form @submit="formSubmit" @reset="formReset">			
				<uni-collapse>
				    <uni-collapse-item title="患者基本信息" open="true">
						<view class="line">
							<label style="float: left;width: 20%;text-align: center;">姓名:</label>
							<input name="name" class="chat_input"  style="width: 70%;float: left;font-size: large;border-bottom: 1rpx solid #F1F1F1;" type="text" placeholder="请正确填写姓名..."/>
						</view>
				        <view class="line">
							<view style="width: 20%;text-align: center;">性别:</view>
							<view>
								<radio-group name="gender">
									<label class="radio">
										<radio value="男" />男
									</label>
									<label class="radio" style="padding-left: 20rpx;">
										<radio value="女" />女
									</label>
								</radio-group>
							</view>
						</view>
						<view class="line">
							<label style="float: left;padding-left: 20rpx;">出生日期:</label>
							<input name="birth" class="chat_input" style="float: left;" type="text" placeholder="格式:2020-01-01(选填)"/>
						</view>
						<view class="line">
							<label style="float: left;width: 25%;padding-left:20rpx;text-align: center;">患者电话:</label>
							<input name="tel" class="chat_input" style="width: 70%;float: left;font-size: large;" type="text" placeholder="请填写患者或家属手机号"/>
						</view>
				    </uni-collapse-item>
					<uni-collapse-item title="检查信息" open="true">
						<view class="line">
							<label style="float: left;width: 25%;padding-left:20rpx;text-align: center;">初步诊断:</label>
							<input name="diagnose" class="chat_input" style="width: 70%;float: left;font-size: large;" type="text" placeholder="选填"/>
						</view>
						<view class="line">
							<label style="float: left;width: 25%;padding-left:20rpx;text-align: center;">检查项目:</label>
							<input name="item" class="chat_input" style="width: 70%;float: left;font-size: large;" type="text" placeholder="请填写检查、检查部位"/>
						</view>
					</uni-collapse-item>
				</uni-collapse>
				
				<view style="padding-top:20rpx;padding-bottom: 400rpx;">
					<myBtn type="submit" w_size="600" h_size="80" text="提交预约"></myBtn>
				</view>
				
			</form>
			
		</view>

JS

		methods: { 
			formSubmit:function(e){
				let tmp = JSON.stringify(e.detail.value)
				console.log('form发生了submit事件,携带数据为:' + JSON.stringify(e.detail.value))
				var formdata = e.detail.value
				// 数据校验
				// console.log(formdata.birth);
				//正则表达式
				let reg_name = /^[\u4e00-\u9fa5]{0,}$/
				let reg_birth = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
				let reg_tel = /(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$/
				//结果标记
				let sign_name = RegExp(reg_name).test(formdata.name);
				let sign_birth = RegExp(reg_birth).test(formdata.birth);
				let sign_tel = RegExp(reg_tel).test(formdata.tel);	
				// console.log(sign+",数据类型:"+typeof(sign));
				if(!sign_name||formdata.name==''){
					this.showModal('请检查姓名');	
				}else if(formdata.gender==''){
					this.showModal('请选择性别')
				}else if(!sign_birth||formdata.name==''){
					this.showModal("请检查出生日期");
				}else if(!sign_tel||formdata.name==''){
					this.showModal("请检查电话号码");
				}else if(formdata.diagnose==''){
					this.showModal('请填写初步诊断')
				}else if(formdata.item==''){
					this.showModal("请填写检查部位");
				}else{
					uni.request({
						url: this.$baseUrl.baseUrl+"Wxtest/ApplyCheck",
						data: tmp,
						method: "post",
						success:(res)=> {
							this.showModal(res.data.msg);
							if (res.confirm||res.cancel) {
								console.log('用户点击确定');
							}
						},
						fail:(res)=>{
							console.log("错误") 
						}
					})
				}
				
			},
			formReset: function(e) {
				console.log('清空数据')
			},
			showModal:function(content){
				uni.showModal({
					title:'提示',
					content:content,
				})
			},
			
		}

C#后端处理方法

        public string ApplyCheck()
        {
            string name = GetRequestString("name", Request);
            string gender = GetRequestString("gender", Request);
            string birth = GetRequestString("birth", Request);
            string tel = GetRequestString("tel", Request);
            string diagnose = GetRequestString("diagnose", Request);
            string item = GetRequestString("item", Request);

            //创建随机数
            Random ran = new Random();
            string id = DateTime.Now.ToString("yyyyMMddHHmmss") + ran.Next(100,999);

            //sql
            string inser_t_check = @"insert into t_check (p_id,p_name,p_gender,p_birth,p_tel,p_diagnose,p_item) values ('{0}','{1}','{2}','{3}','{4}','{5}','{6}')";
            inser_t_check = string.Format(inser_t_check,id, name, gender, birth, tel, diagnose, item);
            //执行
            OracleHelper.ExecuteNonQuerySQL(inser_t_check);

            //
            Dictionary<string, string> dic = new Dictionary<string, string>();
            dic.Add("msg", "预约成功");
            string response = JsonConvert.SerializeObject(dic);        

            return response;
        }

标签:uniapp,tel,string,form,formdata,birth,showModal,数据格式,name
来源: https://www.cnblogs.com/STRSong/p/13470043.html