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

最新推荐文章于 2024-08-07 11:10:27 发布
原创最新推荐文章于 2024-08-07 11:10:27 发布 · 4.2k 阅读
4 ·
CC 4.0 BY-SA版权
文章标签：
#表单 #javascript #html #input
前端项目经验专栏收录该内容
9 篇文章
订阅专栏
<!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>