Learn ajax to implement form verification method when submitting-JS Tutorial-php.cn

Learn ajax to implement form verification method when submitting

coldplay.xixi

Release： 2020-08-19 10:04:49

forward

2148 people have browsed it

Learn ajax to implement form verification method when submitting

[Related article recommendations: ajax video tutorial]

The example in this article shares with you the method of verifying the form when submitting ajax, for everyone For reference, the specific content is as follows

Method 1:

Code example:

Ingenious design: If ajax is submitted, verification and interception cannot be performed , set a flag to judge, very clever design, so collect it!

function inserts(){
 var flag = checkForm();
 if (flag == false) {
  return;
 }
 $.ajax({
     //几个参数需要注意一下
       type: "POST",//方法类型
       dataType: "json",//预期服务器返回的数据类型
       url: "<%=path %>/soldier/inserts" ,//url
       data: $(&#39;#form1&#39;).serialize(),
       success: function (data) {
        alert(data.msg);
        window.location.reload(true);
       },
       error : function() {
         alert(data.msg);
       }
     });
 }
 function checkForm(){
 var name = $("#name").val();
 if (name.trim() == &#39;&#39;) {
  alert("请输入姓名！");
  $("#name").focus();
  return false;
 }
 var sex = $("#sex").val();
 if (sex.trim() == &#39;&#39;) {
  alert("请输入性别！");
  $("#sex").focus();
  return false;
 } else if (sex.trim() != &#39;男&#39; && sex.trim() != &#39;女&#39;) {
  alert("请输入合法性别！");
  $("#sex").val(&#39;&#39;);
  $("#sex").focus();
  return false;
 }
 var age = $("#age").val();
 if (age.trim() == &#39;&#39;) {
  alert("请输入年龄！");
  $("#age").focus();
  return false;
 }else if(age.trim()==0 || age.trim()<=0 || age.trim()>150){
  alert("请输入合法年龄！");
  $("#age").focus();
  return false;
 }
 var politics_sstatus = $("#politics_sstatus").val();
 if (politics_sstatus.trim() == &#39;&#39;) {
  alert("请输入政治面貌！");
  $("#politics_sstatus").focus();
  return false;
 }
 var tel = $("#tel").val();
 if (tel.trim() == &#39;&#39;) {
  alert("请输入联系电话！");
  $("#tel").focus();
  return false;
 }else if(tel.length<11 || tel.length>11){
  alert("请输入合法联系电话！");
  $("#tel").focus();
  return false;
 }
 var id_card = $("#id_card").val();
 if (id_card.trim() == &#39;&#39;) {
  alert("请输入身份证号码！");
  $("#id_card").focus();
  return false;
 }else if(id_card.length<18 ||id_card.length>18){
  alert("请输入合法身份证号码！");
  $("#id_card").focus();
  return false;
 }
 var appeal = $("#appeal").val();
 if (appeal.trim() == &#39;&#39;) {
  alert("请输入主要诉求！");
  $("#appeal").focus();
  return false;
 }
 return true;
 }

Copy after login

Page effect:

Method 2:

This is a login ajax verification

Code example:

Submit button on the page:

<input type="button" id="loginsubmit" value="登录" />

Copy after login

js logic:

Analysis: When the user clicks the button At that time, I will

<script type="text/javascript">
 var redirectUrl = "${redirect}";
 var LOGIN = {
  /*
  3、进行账号密码的校验
  */
  checkInput:function() {
  if ($("#loginname").val() == "") {
   alert("用户名不能为空");
   $("#loginname").focus();
   return false;
  }
  if ($("#nloginpwd").val() == "") {
   alert("密码不能为空");
   $("#nloginpwd").focus();
   return false;
  }
  return true;
  },
  /*
  4、进行登录
  1.当账号密码校验不为空的时候进行后台校验
  */
  doLogin:function() {
  $.post("/user/login", $("#formlogin").serialize(),function(data){
   if (data.status == 200) {
   alert("登录成功！");
   if (redirectUrl == "") {
    location.href = "http://localhost:8082";
   } else {
    location.href = redirectUrl;
   }
   } else {
   alert("登录失败，原因是：" + data.msg);
   $("#loginname").select();
   }
  });
  },
  /*
  2、进行登录校验
  */
  login:function() {
  if (this.checkInput()) {
   this.doLogin();
  }
  }
 
 };
 /* 
 1、页面初始化的时候校验表单的数据
  1.当用户点击登录的时候，绑定一个click事件
  2.调用LOGIN对象的login方法，进行账号密码校验
 */ 
 $(function(){
 $("#loginsubmit").click(function(){
  LOGIN.login();
 });
 });
</script>

Copy after login

Rendering:

Related learning recommendations: js video tutorial

The above is the detailed content of Learn ajax to implement form verification method when submitting. For more information, please follow other related articles on the PHP Chinese website!