酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
【ECS精选特惠】新用户上云低至1折起
百度资源

ajax实现提交时校验表单

来源:互联网搜集 作者:秩名 人气: 发布时间:2020-02-13
本篇文章主要介绍了ajax实现提交时校验表单,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

方法一:

代码示例: 

巧妙设计之处:ajax提交的话,不能够进行校验拦截,设置一个flag来判断,很巧妙的设计之处,故收藏!
 

function inserts(){
 var flag = checkForm();
 if (flag == false) {
  return;
 }
 $.ajax({
     //几个参数需要注意一下
       type: "POST",//方法类型
       dataType: "json",//预期服务器返回的数据类型
       url: "<%=path %>/soldier/inserts" ,//url
       data: $('#form1').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() == '') {
  alert("请输入姓名!");
  $("#name").focus();
  return false;
 }
 var sex = $("#sex").val();
 if (sex.trim() == '') {
  alert("请输入性别!");
  $("#sex").focus();
  return false;
 } else if (sex.trim() != '男' && sex.trim() != '女') {
  alert("请输入合法性别!");
  $("#sex").val('');
  $("#sex").focus();
  return false;
 }
 var age = $("#age").val();
 if (age.trim() == '') {
  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() == '') {
  alert("请输入政治面貌!");
  $("#politics_sstatus").focus();
  return false;
 }
 var tel = $("#tel").val();
 if (tel.trim() == '') {
  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() == '') {
  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() == '') {
  alert("请输入主要诉求!");
  $("#appeal").focus();
  return false;
 }
 return true;
 }

页面效果:



方法二:

这是一个登陆的ajax校验


 

代码示例:

页面的提交按钮:
 

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

 js逻辑:

分析:当用户点击按钮的时候,会
 

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

效果图:


版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://blog.csdn.net/qq_38555490/article/details/91577036

相关文章

  • react axios跨域访问一个或多个域名问题的详解

    react axios跨域访问一个或多个域名问题的详解

    1.react + axios 跨域访问一个域名 配置非常简单,只需要在当前的 package.json 文件里面配置: proxy:http://iot-demo-web-dev.autel.com, //当然,这里是一个假地址 像这样: 这样跨域便完成了,当然,也可以像网上那样,多几段代码,......
    04-20
  • $.ajax中contentType: “application/json” 的用法

    $.ajax中contentType: “application/json” 的用法

    具体内容如下所示: $.ajax({ type: httpMethod, cache:false, async:false, contentType: application/json; charset=utf-8, dataType: json,//返回值类型 url: path+url, data:jsonData, success: function(data){ var resultData = 返......
    02-20
  • ajax实现提交时校验表单

    ajax实现提交时校验表单

    方法一: 代码示例: 巧妙设计之处:ajax提交的话,不能够进行校验拦截,设置一个flag来判断,很巧妙的设计之处,故收藏! function inserts(){ var flag = checkForm(); if (flag == false) { return; } $.ajax({ //几个参数需要注意一......
    02-13
  • Ajax实现二级联动菜单教程

    Ajax实现二级联动菜单教程

    index.jsp %@ page language=java pageEncoding=UTF-8%html head title二级菜单联动演示/title script type=text/javascript var req; window.nlad=function() {//页面加载时的函数 } function Change_Select(){//当第一个下拉框的选项发......
    11-27
  • 爬取今日头条Ajax请求的教程

    爬取今日头条Ajax请求的教程

    今天小编给大家介绍爬取今日头条Ajax请求。 网址: https://www.toutiao.com/ 搜索头条 可以得到这个网址: https://www.toutiao.com/search/?keyword=%E8%A1%97%E6%8B%8D 开发者工具查看: 我们在搜索中并没有发现上面的文字,那么我们......
    11-14
  • Ajax报错400的参考解决方法

    Ajax报错400的参考解决方法

    今天小编给大家介绍Ajax报错400的参考解决方法。 Failed to load resource: the server responded with a status of 400 (Bad Request) 报错代码为400的错误的原因:基本上都是前台传的数据格式不正确造成的,但是这个格式如何不正确,就......
    11-14
  • Ajax引擎:ajax请求步骤详细代码教程

    Ajax引擎:ajax请求步骤详细代码教程

    今天小编给大家分享Ajax引擎:ajax请求步骤详细代码教程。 说起AJAX,可能是很多同学在很多地方都看到过,各大招聘网站上对于WEB前端和PHP程序员的技能要求清单中也是必不可少的一项。但是,ajax请求步骤详细代码以及说明却比较少见到 什......
    11-08
  • Ajax实现表格中信息不刷新页面进行更新数据的方法

    Ajax实现表格中信息不刷新页面进行更新数据的方法

    本篇文章给大家介绍Ajax实现表格中信息不刷新页面进行更新数据的方法。 直接上代码: HTML: !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 titleTitle/title script type=text/javascript src=jslib/jquery-3.1.1.js/script script......
    11-07
  • ajax实现页面的局部加载的方法

    ajax实现页面的局部加载的方法

    今天小编给大家介绍ajax实现页面的局部加载的方法。 点击头部即右上角的链接时,页面会根据相应的链接加载新的内容,显示在下方;在中间区域有3栏,当点击1栏中的链接,2栏中会显现相应的内容,点击2栏中的内容,3栏中的内容又会根据2栏......
    11-05

最新更新