Ajax和OnSubmit属性验证表单提交

最新推荐文章于 2022-10-30 20:00:00 发布

原创最新推荐文章于 2022-10-30 20:00:00 发布 · 658 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文探讨了如何使用HTML表单的onsubmit属性和Ajax进行同步验证，确保用户在提交表单前，用户名未在系统中存在。通过Ajax发送POST请求检查用户名，如果返回'exist'则提示用户已存在并阻止表单提交，否则允许提交。由于Ajax的异步性质，需要声明一个变量fatr来保存返回值并在回调函数中处理。然而，直接在回调函数中return无效，因此需要在外部返回fatr的值。

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;
           }