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