ajax实现提交时校验表单方法_AJAX相关

来源:脚本之家  责任编辑:小易  

这个建议楼主直接去看JQuery的API文档就可以了啊!已经说的很详细了!www.zgxue.com防采集请勿采集本网。

本文实例为大家分享了ajax提交时校验表单的方法,供大家参考,具体内容如下

提交表单前进行验证(方法一) first_name: input name=\"firstname\"type=\"text\"id=\"firstname\"/> label id=\"firstnameLabel\"></label></td> last_name: input name=\"lastname

方法一:

同样可通过设置server.xml配置文件来实现。port=\"8080\"maxHttpHeaderSize=\"8192 maxThreads=\"150\"minSpareThreads=\"25\"maxSpareThreads=\"75 enableLookups=\"false\"redirectPort=\"8443\"acceptCount=\"100

代码示例: 

看具体功能咯,不同的需求可以做不同的请求的,比如做页面校验的话当然可以提交表单到后台验证后返回并刷新界面,这里为了更好的用户体验,选择ajax做异步的校验无疑是更好的选择!我现在就遇到

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

看一下控制台和日志的Exception信息,textarea一般都要有长度的输入校验,因为一般存入数据库时有最大长度

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异步校验表单输入的用户名的实现。jsp中的ajax校验是放在js中做的,如下: function init(){ document.getElementById(\"username\").focus();} function validate(userfield){ if(trim

页面效果:

 方法二:

这是一个登陆的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>

效果图:

onError后面函数再添加一句阻止提交数据的代码试试内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 零基础学习ajax之制作自动校验的表单
  • 浅析onsubmit校验表单时利用ajax的return false无效问题
  • 利用 linq+jquery+ajax 实现异步分页功能可简化带宽压力
  • 如何成为ajax高手
  • ajax 支持搜索引擎问题分析
  • 各种ajax方法的使用比较详解
  • ajax请求成功后打开新窗口地址
  • ajax中浏览器的缓存问题解决方法
  • ajax分页查询详解
  • 基于ajax+div的“左边菜单、右边内容”页面效果实现
  • 分享ajax创建简单实例代码
  • ajax验证用户的唯一性
  • 试用jQuery formValidator表单校验完用AJAX提交
  • Jquery ajax提交表单几种方法详解
  • 表单校验,并提交校验问题(求解决)?
  • bootstrap 表单验证FormValidation ajax提交后怎么恢复初始状态
  • jquery在表单提交前有几种校验方法
  • servelet+ajax 校验用户是否存在。 servelet 获取ajax提交的值乱码。 用了很多网上的方法,无效。
  • ajax提交数据
  • jQuery Ajax 提交表单内容多就出现500 Internal Server Erro
  • AJAX异步表单验证用户名是否存在(jsp+sevlet实现)
  • thinkPHP3.2.3利用Ajax前台实现验证码验证,但通过form表单的按钮提交后,验证码一直错误!如何解决?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页ajax相关零基础学习ajax之制作自动校验的表单浅析onsubmit校验表单时利用ajax的return false无效问题利用 linq+jquery+ajax 实现异步分页功能可简化带宽压力如何成为ajax高手ajax 支持搜索引擎问题分析各种ajax方法的使用比较详解ajax请求成功后打开新窗口地址ajax中浏览器的缓存问题解决方法ajax分页查询详解基于ajax+div的“左边菜单、右边内容”页面效果实现分享ajax创建简单实例代码ajax验证用户的唯一性jquery ajax 向后台传递数组参数ajax readystate的五种状态详解ajax中的async属性值之同步和异步jquery实现ajax定时刷新局部页面ajax传递多个参数具体实现jquery ajax中使用serialize()方ajax获取数据中文乱码问题最简单自己动手打造ajax图片上传(网上没ajax 缓存问题的两种解决方法(ieajax获取数据然后显示在页面的实用ajax技术实现在自己blog上聚合并显示朋iframe实现ajax文件上传效果示例ajax的简单实用实例代码asp小偷程序如何利用xmlhttp实现表单的提ajax 设置access-control-allow-origin实ajax实现输入框文字改变展示下拉列表的效一个ajax类ajax跨域请求数据的四种方法(实例讲解)jquery ajax 向后台传递数组参数示例ajax中设置contenttype: "application/js
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved