uniapp form表單提交,資料格式驗證
阿新 • • 發佈:2020-08-10
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; }