简单的表单弹窗验证（遍历、文本、数字号码、身份证、单选、多选、下拉框）

最新推荐文章于 2021-08-05 12:16:54 发布

qq_Achen

最新推荐文章于 2021-08-05 12:16:54 发布

阅读量458

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_26173001/article/details/103506729

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

现在可使用的验证不为空：遍历（使用同一个class遍历遇到为空时则停止遍历并弹窗提示）、文本、数字号码、身份证、单选、多选、下拉框

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>弹窗效果表单验证</title>
	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
</head>
<body>

<form method="post" action="http://www.baidu.com" name="myform" id="myform" class="myform_box form_yuyue">
    <table class="table_form" width="100%" cellspacing="0">
    <tbody>
        <tr>
          <td class="tdleft"> <font color="red">*</font> 【同类名遍历】基本内容：必填1 </td>
          <td class="tdright"><input type="text" name="info[one]" id="one" value=""  class="basicIn">  </td>
        </tr>
        <tr>
          <td class="tdleft"> <font color="red">*</font> 【同类名遍历】基本内容：必填2 </td>
          <td class="tdright"><input type="text" name="info[two]" id="two" value="" class="basicIn" >  </td>
        </tr>
        <tr>
          <td class="tdleft"> <font color="red">*</font> 【同类名遍历】基本内容：必填3 </td>
          <td class="tdright"><input type="text" name="info[three]" id="three" value="" class="basicIn" >  </td>
        </tr>
        <tr>
          <td class="tdleft"> <font color="red">*</font> 【不带同类名】基本内容：选填 </td>
          <td class="tdright"><input type="text" name="info[four]" id="four" value="" >  </td>
        </tr>
        <tr>
          <td class="tdleft"> <font color="red">*</font> 【多选】获知渠道 </td>
          <td class="tdright t_ways">
                <input type="hidden" name='info[ways][]' value="-99">
                <label class="ib"><input type="checkbox" name='info[ways][]' id="ways_1"  value="电子邮件"> 电子邮件</label>
                <label class="ib"><input type="checkbox" name='info[ways][]' id="ways_2"  value="手机短信"> 手机短信</label>  
                <label class="ib"><input type="checkbox" name='info[ways][]' id="ways_3"  value="同事/朋友"> 同事/朋友</label>
                <label class="ib"><input type="checkbox" name='info[ways][]' id="ways_4"  value="微信"> 微信</label>
                <label class="ib"><input type="checkbox" name='info[ways][]' id="ways_5"  value="搜索引擎"> 搜索引擎</label>
                <label class="ib"><input type="checkbox" name='info[ways][]' id="ways_6"  value="网络广告"> 网络广告</label>
            </td>
        </tr>
        <tr>
          <td class="tdleft"> <font color="red">*</font> 【下拉框】报考层次 </td>
          <td class="tdright t_cengci">
              <select name='info[cengci]' id='cengci'>
                <option disabled selected >请选择</option>
                <option value="高起专" >高起专</option>
                <option value="专升本" >专升本</option>
                <option value="高起本" >高起本</option>
              </select>
          </td>
        </tr>
        <tr>
          <td class="tdleft"> <font color="red">*</font> 【中文文本】您的姓名 </td>
          <td class="tdright"><input type="text" name="info[xingming]" id="xingming" value="" >  </td>
        </tr>
        
        <tr>
          <td class="tdleft"> <font color="red">*</font> 【11位数字】联系电话 </td>
          <td class="tdright"><input type="text" name="info[dianhua]" id="dianhua" value="" >  </td>
        </tr>
        <tr>
          <td class="tdleft"> <font color="red">*</font> 【单选】您的性别 </td>
          <td class="tdright t_xingbie"><label class="ib"><input type="radio" name="info[xingbie]" id="xingbie_男" value="男"> 男</label><label class="ib" ><input type="radio" name="info[xingbie]" id="xingbie_女" value="女"> 女</label>  </td>
        </tr>
        <tr>
          <td class="tdleft"> <font color="red">*</font> 【身份证】身份证号 </td>
          <td class="tdright"><input type="text" name="info[shenfen]" id="shenfen" value="" >  </td>
        </tr>
        <tr>
          <td class="tdleft"> <font color="red">*</font> 【中文文本】当前学历 </td>
          <td class="tdright"><input type="text" name="info[xueli]" id="xueli" value="" >  </td>
        </tr>
        
        <tr>
          <td class="tdleft"> <font color="red">*</font>【不为空】资料邮寄地址</td>
          <td class="tdright"><input type="text" name="info[youji]" id="youji" value="" > </td>
        </tr>
        <tr>
            <td class="tdleft"><font color="red">*</font> 【不为空】留言内容</td>
            <td class="tdright"><textarea name="info[liuyan]" id="liuyan"></textarea></td>
        </tr>
        <tr>
          <td colspan="2" class="submittd"><input type="submit" name="dosubmit" id="mydosubmit" value="确认提交"> <input type="reset" class="inputsubmit" value="重置信息"></td>
        </tr>
      </tbody>
    </table>
    
</form>

<style type="text/css">
.myform_box .table_form{width: 800px; margin: 0.5rem auto;}
.myform_box .table_form tr{}
.myform_box .table_form th{}
.myform_box .table_form td{border:none; padding: 10px 0;}
.myform_box .tdleft {width:34%;text-align:center;line-height:40px;color:#222222;font-size:0.8rem;}
.myform_box .tdleft span {color:red; width: 16px; display: inline-block;}
.myform_box .tdright {width:60%;line-height:40px; color:#222222; text-align: left;}
.myform_box .tdright input[type=text] {width:100%; line-height:40px;height:40px;border:#bbb 1px solid; padding: 0 0.2rem; box-sizing: border-box;}

.myform_box .tdright label{margin-right: 10px;}
.myform_box .tdright select{width: 100%;line-height:40px; height: 40px;border:1px solid #bbb; padding: 0 0.2rem; box-sizing: border-box; font-size: 14px; background: #fff;}
.myform_box .tdright textarea{height: 4rem !important; width: 100%; line-height: 1.4; resize: none;}
.myform_box .submittd {padding:15px;text-align:center;}
.myform_box .submittd input {border: 0px; background: #3790e2; color: #FFF; width: 40%; height: 36px; line-height: 36px; margin: 0 0.123rem; -webkit-appearance: button; cursor: pointer; align-items: flex-start; text-align: center; font: 400 13.3333px Arial; border-collapse: collapse;}
.myform_box textarea {
    height: 4rem !important;
    width: 100%;
    line-height: 1.4;
    resize: none;
}

</style>



</body>
</html>

jQuery验证：

$(function(){
  $("#mydosubmit").click(function(){

    //bianli
    var result = true;
    $(".table_form input.basicIn").each(function () {
            if ($(this).val() == "") {
                alert("请填写基本信息中的*内容");
                result = false;
                return false;
            }
    });
    if (!result){
        return false;
    }



    //
    var count6 = $('.t_ways input[type=checkbox]:checked').length;
    if(count6!=0) {
 
    }else{
      alert("请选择获知渠道");
      return false;
    }

    
    var count7 = $('#cengci option:selected:enabled').length;
    if(count7==1) {
 
    }else{
      alert("请选择报考层次");
      return false;
    }


    var zhuanye=/^[\u4e00-\u9fa5]+$/;//中文
    if(zhuanye.test($("#zhuanye").val())){

    }else{
      alert("请输入报考专业");
      return false;
    };


    var xingming=/^[\u4e00-\u9fa5]+$/;//中文
    if(xingming.test($("#xingming").val())){

    }else{
      alert("请输入您的中文姓名");
      return false;
    };


    // var dianhua=/^1[345678]\d{9}$/;
    var dianhua=/^1\d{10}$/;
    if(dianhua.test($("#dianhua").val())){

    }
    else{alert("请输入11位联系电话");return false;
    };


    var count8 = $('.t_xingbie input[type=radio]:checked').length;
    if(count8==1) {
 
    }else{
      alert("请选择您的性别");
      return false;
    }
    

    var shenfen=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    if(shenfen.test($("#shenfen").val())){

    }else{
      alert("请输入身份证号码");
      return false;
    };


    var xueli=/^[\u4e00-\u9fa5]+$/;//中文
    if(xueli.test($("#xueli").val())){

    }else{
      alert("请输入您的学历");
      return false;
    };
     

    var youji=$("#youji").val()
    if(youji!=''){

    }else{
      alert("请填写资料邮寄地址");
      return false;
    };


    var liuyan=$("#liuyan").val()
    if(liuyan!=''){

    }else{
      alert("请填写您的留言");
      return false;
    };



    alert("预约信息提交成功，我们会尽快与您联系！");return true;
  });

})

qq_Achen

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单的表单弹窗验证（遍历、文本、数字号码、身份证、单选、多选、下拉框）

现在可使用的验证不为空：遍历（使用同一个class遍历遇到为空时则停止遍历并弹窗提示）、文本、数字号码、身份证、单选、多选、下拉框<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>弹窗效果表单验证</title> <script type=...
复制链接

扫一扫