Ajax和OnSubmit属性验证表单提交

Ajax和OnSubmit属性验证表单提交

用onsubmit的返回值的true和false去验证表单是否符合要求。

Ajax向后台发请求，查询此用户是否已经存在。

返回注意：

• 返回为true,符合，反之，不符合，（返回为null,也符合。）

• 在执行ajax时，后面程序也会并发执行，导致表单已经被提交完，ajax才执行回调函数。

• 在ajxa的回调函数中 return的话，无效，所以要先声明一个，然后在回调函数判断是。

HTML

<form method="post" id="myForm" action="${pageContext.request.contextPath}/employee/addaddEmployee" name="form" onsubmit="return registered(this);" >
<td>
     <input type="text" id="username" maxlength="20" name="username"/>
       <span id="caveatone"></span>
</td>    
</form>

JavaScript

function registered(form){
               var fatr = null;//声明一个变量，用于返回。
               $.ajax({ 			     url:"${pageContext.request.contextPath}/employee/determineUsernameExists", // 请求路径
                   type:"POST" , //请求方式
                   async:false,//同步方式
                   cache:false,//禁止缓存
                   dataType:"text",//设置接受到的响应数据的格式
                   data:{
                       username:$("#username").val()
                   },
                   //响应成功后的回调函数
                   success:function (data){
                       if(data == "exist"){
                           alert("用户已存在")
                           $("#caveatone").text("用户已存在");
                           fatr = false
                           //在这里return 无效。
                       }else {
                           alert("注册成功。");
                           fatr = true
                       }
                   },
               });

               return fatr;
           }

时间：2020/9/29 随笔。
PS:新手上路，内容可能有误。