1.表单排版一般效果
2.css样式
.index-pg{padding-bottom:20px;padding-top: 20px;}.index-pg .text1{font-size:16px;color:333;text-align:center;padding:10px 0}.index-pg .text2{font-size:14px;color:333;text-align:center}.index-pg .text1 span,.index-pg .text2 span{color:#2681d9}.index-pg .input-box p{ display: -webkit-box; display: box; display: -webkit-flex; display: flex; margin-bottom:15px}.index-pg .input-box p span{width:45px;line-height:30px;}.index-pg .input-box p input{padding:0 5px;color:#666;-webkit-box-flex: 1;-webkit-flex: 1;border:3px solid #2681d9;line-height:25px;}.index-pg .text3{padding:0 35px;color:#2681d9;font-size:14px;}.index-pg .input-box1 p span{width:70px;}.index-pg .input-box1 p select{height:30px;line-height:30px;-webkit-box-flex: 1;-webkit-flex: 1;border:3px solid #2681d9}.index-pg .pg-btn img{width:160px;height:40px;display:block;margin:0 auto;}3.js代码
$('#form1').on('click','.pg-btn',function(){ var form=$('this).data('target-id'); var myform=$('#'+form); var name=myform.find("[name='username']"); var tel=myform.find("[name='tel']"); //下拉列表选中的选中项文字 var country=myform.find("[name='country_id']").find("option:selected").text(); //检测手机号码 function checkphone(num){ var re = /^1[358][0-9]{9}$/; if(!re.test(num)){ alert('请您输入正确的手机号码')； return false; } } //非空验证 if (!$.trim(name.val())) { layer.msg('请填写姓名'); return false; }; if (!$.trim(tel.val())) { layer.msg('请输入电话号码'); return false; }; var formdata={ name:name, tel:tel, country:country }; $.post(form.attr('action'),formdata,function(res){ var res=JSON.parse(res); if(res.status==1){ alert('您已经提交成功')； form.reset(); }else{ alert(‘不好意思，服务器出了点小错误，请您重新提交一次')； form.reset(); } })})
