为什么用选择器选择必填项遍历会清空表单

练习写了个注册页面,把值发给后台打印总为空,最后发现是因为提交前的校验必填项是否填写时清空了表单,为什么会有这种效果?如果解决呢?求大佬指点一二.
function zhuce(){
check=true;
$("input[required='required']").val(function(i,e){
if(e==""){ check=false; }
}); if (check==false){
alert("必填项未填写")
}else {
tj(); }

}

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

前端全部代码如下
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <link href="css/bootstrap.css" rel="stylesheet"/>

    <title>
        注册
    </title></head>
<body>
<div class="container">
    <div class="col-md-6 col-md-offset-3" id="form-container">
        <h1 class="text-center">
             用户注册
        </h1>
        
        <form   class="form-inline" method="post" role="form">
            <div class="form-group" style="padding-bottom: 8px;">
                <label class="col-md-6 text-center" for="yhm" style="margin-bottom: -2px;color: red;">
                     用户名   :
                </label>
                <div class="col-md-6">
                    <input class="form-control" id="yhm" name="yhm" onblur="checkyhm()" required="required" type="text"/>
                    <p id="yhmError" style="margin-bottom: -2px;color: red;">
                    </p>
                </div>
            </div>
            <div class="form-group" style="padding-bottom: 8px;">
                <label class="col-md-6 text-center" for="password" style="margin-bottom: -2px;color: red;">
                     密    码   :
                </label>
                <div class="col-md-6">
                    <input class="form-control" id="password" name="password"  required="required" type="password"/>
                    <p id="passwordError" style="margin-bottom: -2px;color: red;">
                    </p>
                </div>
            </div>
            <div class="form-group" style="padding-bottom: 8px;">
                <label class="col-md-6 text-center" for="rePassword" style="margin-bottom: -2px;color: red;">
                     确认密码:
                </label>
                <div class="col-md-6">
                    <input class="form-control" id="rePassword" name="rePassword" onblur="checkrePassword()" required="required" type="password"/>
                    <p id="rePasswordError" style="margin-bottom: -2px;color: red;">
                    </p>
                </div>
            </div>
            <div class="form-group" style="padding-bottom: 8px;">
                <label class="col-md-6 text-center" for="name" style="margin-bottom: -2px;color: red;">
                     手机号    :
                </label>
                <div class="col-md-6">
                    <input class="form-control" id="name" name="name"  required="required" type="text"/>
                    <p id="nameError" style="margin-bottom: -2px;color: red;">
                    </p>
                </div>
            </div>
            <div class="form-group" style="padding-bottom: 8px;">
                <label class="col-md-6 text-center" for="email" >
                    邮      箱 :
                </label>
                <div class="col-md-6">
                    <input class="form-control" id="email" name="email"   type="text"/>
                    <p id="emailError" style="margin-bottom: -2px;color: red;">
                    </p>
                </div>
            </div>
            <div class="form-group" style="padding-bottom: 8px;">
                <label class="col-md-6 text-center" for="qq" >
                    Q       Q :
                </label>
                <div class="col-md-6">
                    <input class="form-control" id="qq" name="qq"  type="text"/>
                    <p id="qqError" style="margin-bottom: -2px;color: red;">
                    </p>
                </div>
            </div>

            <div class="form-group" style="padding-bottom: 8px;">
                <label class="col-md-6 text-center" for="xm" style="margin-bottom: -2px;color: red;">
                     姓  &ensp;&ensp;  名 :
                </label>
                <div class="col-md-6">
                    <input class="form-control" id="xm" name="xm"  required="required" type="text"/>
                    <p id="xmError" style="margin-bottom: -2px;color: red;">
                    </p>
                </div>
            </div>

            <div class="form-group" style="padding-bottom: 8px;">
                <label class="col-md-6 text-center" for="age" style="margin-bottom: -2px;color: red;">
                     年       &ensp;&ensp;    龄    :
                </label>
                <div class="col-md-6">
                    <input class="form-control" id="age" name="age" required="required" type="text"/>
                    <p id="ageError" style="margin-bottom: -2px;color: red;">
                    </p>
                </div>
            </div>

            <br />
            <div style="margin-left: 15px ; margin-bottom: 10px;" class="form-group" style="padding-bottom: 8px;">

                <label class="col-md-6 text-center" for="mz">
                  &ensp;  民  &ensp;&ensp;   族  :
                </label>
                <div class="col-md-6">
                    <select class="form-control" id="mz" name="mz"   type="text">
                     <option value="0">请选择</option>
                     <option value="1">汉</option>
                     <option value="1">其他</option>
                    </select>
                    <p id="ageError" style="margin-bottom: -2px;color: red;">
                    </p>
                </div>
            </div>
            <br />
            <div style="margin-left: 15px ;" class="form-group" style="padding-bottom: 8px;">

                <label class="col-md-6 text-center" for="mz" style="margin-bottom: -2px;color: red;">
                  &ensp;  性 &ensp;&ensp;   别    :
                </label>
                <div class="col-md-6">

                    <select class="form-control" id="xb" required="required" name="xb">
                     <option value="">请选择</option>
                     <option value="1">男</option>
                     <option value="2">女</option>
                    </select>
                    <p id="xmError" style="margin-bottom: -2px;color: red;">
                    </p>
                </div>
            </div>
            

            <div class="col-lg-10" style="margin-bottom: 8px">
                <button class="btn btn-primary btn-block" type="button" onclick="zhuce()" >注册</button>
            </div>

        </form>
    </div>
</div>
</body>
<script src="js/jquery.js" ></script>
<script>
function checkyhm(){
var yhm=$("#yhm").val();
console.log("1"+yhm)
$.ajax({
    url: "account.xml",
    dataType: 'xml',
    type: 'GET',
    timeout: 2000,
    error: function(xml)
    {
      alert("加载XML 文件出错！");
    },
    success: function(xml)
    {
      $(xml).find("account").each(function(i)
      {         var name = $(this).children("loginname").text();
        if (name==yhm){          alert("用户名已存在");
$("#yhmError").html("");
        }else {
                $("#yhmError").html("可用");
            }

      });
    }
   });
}

function checkrePassword () {
let ps= $("#password").val();
let psq=$("#rePassword").val();
if(psq==ps){
alert("密码可使用")
}else{
alert("俩次输入不一致")
}
}
let check=false
function zhuce(){
check=true;
$("input[required='required']").val(function(i,e){
if(e==""){ check=false; }
}); if (check==false){
alert("必填项未填写")
}else {
            tj();        }

}
    function tj() {
        var data=$("form").serialize();
var yhm=$("#yhm").val();
console.log(yhm)
$.post("zhuce",//url
data,//data
function(msg){
    if (msg.flag="true"){
alert("注册成功")
                }
},
"json");
}</script></html>
Quote: 引用 2 楼人生呐的回复:

打断点看一下？一步一步看是哪句前端代码清空了表单数据[/quotje]
就是
$("input[required='required']").val(function(i,e){
这句,我开头加红的
$("input[required='required']").each(function(){
      if($(this).val()===""){
          check=false;
      }
  });
你红色部分改成这个试一下看行不
jQuery.fn.val，传入参数，代表设置值。js里function默认返回值是空。你这个语句的意思就是将所有input[required='required']的元素的值设为空。4楼代码应该是对的