1.表单排版一般效果

<divclass="index-pgsubmit-form"><formaction=""method="post"id="form1"><divclass="input-box"><p><span>姓名：</span><inputname="username"type="text"placeholder="请输入您的姓名"></p><p><span>手机：</span><inputname="tel"type="text"placeholder="请输入您的手机号码"></p></div><divclass="input-boxinput-box1"><p><span>意向国家：</span><selectname="country_id"><optionvalue="1">美国</option><optionvalue="2">加拿大</option><optionvalue="3">匈牙利</option><optionvalue="4">西班牙</option><optionvalue="5">葡萄牙</option></select></p></div><pclass="pg-btn"><imgsrc="p_w_picpath/btns.png"></p></form></div>

2.css样式

.index-pg{padding-bottom:20px;padding-top:20px;}.index-pg.text1{font-size:16px;color:333;text-align:center;padding:10px0}.index-pg.text2{font-size:14px;color:333;text-align:center}.index-pg.text1span,.index-pg.text2span{color:#2681d9}.index-pg.input-boxp{display:-webkit-box;display:box;display:-webkit-flex;display:flex;margin-bottom:15px}.index-pg.input-boxpspan{width:45px;line-height:30px;}.index-pg.input-boxpinput{padding:05px;color:#666;-webkit-box-flex:1;-webkit-flex:1;border:3pxsolid#2681d9;line-height:25px;}.index-pg.text3{padding:035px;color:#2681d9;font-size:14px;}.index-pg.input-box1pspan{width:70px;}.index-pg.input-box1pselect{height:30px;line-height:30px;-webkit-box-flex:1;-webkit-flex:1;border:3pxsolid#2681d9}.index-pg.pg-btnimg{width:160px;height:40px;display:block;margin:0auto;}

3.js代码

$('#form1').on('click','.pg-btn',function(){varform=$('this).data('target-id');varmyform=$('#'+form);varname=myform.find("[name='username']");vartel=myform.find("[name='tel']");//下拉列表选中的选中项文字varcountry=myform.find("[name='country_id']").find("option:selected").text();//检测手机号码functioncheckphone(num){varre=/^1[358][0-9]{9}$/;if(!re.test(num)){alert('请您输入正确的手机号码')；returnfalse;}}//非空验证if(!$.trim(name.val())){layer.msg('请填写姓名');returnfalse;};if(!$.trim(tel.val())){layer.msg('请输入电话号码');returnfalse;};varformdata={name:name,tel:tel,country:country};$.post(form.attr('action'),formdata,function(res){varres=JSON.parse(res);if(res.status==1){alert('您已经提交成功')；form.reset();}else{alert(‘不好意思，服务器出了点小错误，请您重新提交一次')；form.reset();}})})