js表单提交验证-input下显示提示信息

来源：互联网发布：特征提取算法如何优化编辑：程序博客网时间：2024/05/03 06:38
<!DOCTYPE html><html lang="zh-cmn-Hans"><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />  <meta name="x-csrf-token" content="">  <link rel="icon" href="/images/favicon_cvtouch-32580b5f27.ico" type="image/x-icon"/>  <link rel="stylesheet" href="/css/app-03e911ce78.cvtouch.min.css"/>  <link rel="stylesheet" href="/css/local.css"/>  <link rel="stylesheet" href="/css/bootstrap.min.css">  <script type="text/javascript">  window.globalConfig = window.globalConfig || {};  window.globalConfig.baseUrl = "";  </script>  <title>连线产品经理</title>  <style>  body {  background: white;  }  .common-form-experience .form-group input[type=text] {  padding-left: 5px;  font-size: 14px;  height: 46px;  line-height: 46px;  }  </style></head><body><div id="mpbind-content" class="common-body">  <form id="loginForm" name="loginForm" class="form-horizontal common-form common-form-experience" role="form" method="" action="">  <!-- 姓名 -->  <div class="form-group">  <label style="display: block;">建议类型</label>  <div class="col-xs-12">  <select id="type" name="type" class="form-control" required="required">  <option value ="产品功能">产品功能</option>  <option value ="外观设计">外观设计</option>  <option value="硬件配置">硬件配置</option>  <option value="其他">其他</option>  </select>  </div>  </div>  <!-- 具体描述 -->  <div class="form-group">  <label style="display: block;" >具体描述</label>  <div class="col-xs-12">  <textarea id="desc" name="desc" placeholder="您的意见" class="form-control" rows="5" cols="20" ></textarea>  <div class="desc_down" style="float: right;color: red;display: none;">描述信息不能为空</div>  </div>  </div>  <!-- 您的姓名 -->  <div class="form-group">  <label style="display: block;">您的姓名</label>  <div class="col-xs-12">  <input id="name" type="text" name="name" placeholder="" class="form-control" >  <div class="name_down" style="float: right;color: red;display: none;">请输入您的姓名</div>  </div>  </div>  <!-- 联系电话 -->  <div class="form-group">  <label style="display: block;">联系电话</label>  <div class="col-xs-12">  <input id="telephone" type="text" name="telephone" placeholder="" class="form-control">  <div class="telephone_down" style="float: right;color: red;display: none;"></div>  <!--<span class="icon password-icon"></span>-->  </div>  </div>  <div class="form-group submit">  <div class="col-xs-12">  <input type="hidden" id="check" name="check" value="1" />  <input id="btnSubmit" name="submit" type="botton" value="提交" class="btn btn-primary-green" style="display: block;width: 100%;color: #fff;" readonly="readonly">  <div id="div-common-error" class="form-group has-error hidden">  <span id="common-error" class="help-block"></span>  </div>  </div>  </div>  </form></div><!--<script src="/js/lib/html5shiv.js"></script>--><!--<script src="/js/lib/placeholders-695903a1bd.jquery.min.js"></script>--><script src="/js/foot-fc3487f20f.min.js"></script><!--<script src="/js/validate-89d73abdcf.min.js"></script>--><!--<script src="/js/captcha-a4bdd6309a.js" type="text/javascript"></script>--><!--<script src="/js/wechatbind-51eae051f3.js" type="text/javascript"></script>--><script src="/js/picker.min.js"></script><script charset="UTF-8">!function(a){var b,c;window.Ca=window.Ca||{},window.Ca.tid=a,b=document.createElement("script"),c=document.getElementsByTagName("script")[0],b.async=1,b.src="//myou.cvte.com/analytics/ca.js",c.parentNode.insertBefore(b,c)}("10000014"); </script><!-- 引入wechat JS文件 --><script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script><script src="/js/scripts/jquery.min.js"></script><script>  $(document).ready(function(){  $('#telephone').blur(function(){  checkPhone();  });  $('#telephone').focus(function(){  $(".telephone_down").hide();  });  function checkPhone(){  var phone = $('#telephone').val();  var phoneReg = /^(1[3-9]\d{9})|((0[0-9]{2}-*[0-9]{8})|(0[0-9]{3}-*[0-9]{7}))$/;  if(!phoneReg.test(phone)){  var telephone = $(".telephone_down");  if(phone == ''){  telephone.text('请输入手机号码');  }else{  telephone.text('手机号码有误');  }  $(".telephone_down").show();  return false;  }else{  return true;  }  }  $('#name').blur(function(){  checkName();  });  $('#name').focus(function(){  $(".name_down").hide();  });  function checkName(){  var name = $('#name').val();  if(name == ''){  $('.name_down').show();  return false;  }else{  return true;  }  }  $('#desc').blur(function(){  checkDesc();  });  $('#desc').focus(function(){  $(".desc_down").hide();  });  function checkDesc(){  var desc = $('#desc').val();  if(desc == ''){  $('.desc_down').show();  return false;  }else{  return true;  }  }  wx.config({  debug: false,  appId: '{$signPackage.appId}',  timestamp: '{$signPackage.timestamp}',  nonceStr: '{$signPackage.nonceStr}',  signature: '{$signPackage.signature}',  jsApiList: [  'checkJsApi',  'onMenuShareTimeline',  'onMenuShareAppMessage'  ]  });  //通过ready接口处理成功验证  wx.ready(function(){  });  $('#btnSubmit').click(function(){  if(checkDesc() & checkName() & checkPhone()){  var type = $('#type').val();  var name = $('#name').val();  var desc = $('#desc').val();  var telephone = $('#telephone').val();  $.post("/Api/suggest/sendtempMsg",{type:type,desc:desc,name:name,telephone:telephone},function(data){  if(data = 'success'){  alert('提交成功');  $.post("/Api/suggest/closeWind",{openid:'{$openid}',name:name,desc:desc},function(data2){  wx.closeWindow(); //关闭窗口回到公众号主界面  });  }  });  }  });  });</script><!-- 通过config接口注入权限验证配置 --><script type="text/javascript">  //通过config接口注入权限验证配置</script></body></html>
阅读全文
0 0