【相关文章推荐:ajax视频教程】
本文实例为大家分享了ajax提交时校验表单的方法,供大家参考,具体内容如下
方法一:
代码示例:
巧妙设计之处: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();returnfalse;}var sex = $("#sex").val();if(sex.trim()==){
alert("请输入性别!");
$("#sex").focus();returnfalse;}elseif(sex.trim()!=男&& sex.trim()!=女){
alert("请输入合法性别!");
$("#sex").val();
$("#sex").focus();returnfalse;}var age = $("#age").val();if(age.trim()==){
alert("请输入年龄!");
$("#age").focus();returnfalse;}elseif(age.trim()==0|| age.trim()<=0|| age.trim()>150){
alert("请输入合法年龄!");
$("#age").focus();returnfalse;}var politics_sstatus = $("#politics_sstatus").val();if(politics_sstatus.trim()==){
alert("请输入政治面貌!");
$("#politics_sstatus").focus();returnfalse;}var tel = $("#tel").val();if(tel.trim()==){
alert("请输入联系电话!");
$("#tel").focus();returnfalse;}elseif(tel.length<11|| tel.length>11){
alert("请输入合法联系电话!");
$("#tel").focus();returnfalse;}var id_card = $("#id_card").val();if(id_card.trim()==){
alert("请输入身份证号码!");
$("#id_card").focus();returnfalse;}elseif(id_card.length<18||id_card.length>18){
alert("请输入合法身份证号码!");
$("#id_card").focus();returnfalse;}var appeal = $("#appeal").val();if(appeal.trim()==){
alert("请输入主要诉求!");
$("#appeal").focus();returnfalse;}returntrue;}
页面效果:
复制
var redirectUrl ="${redirect}";var LOGIN ={/*
3、进行账号密码的校验
*/
checkInput:function(){if($("#loginname").val()==""){
alert("用户名不能为空");
$("#loginname").focus();returnfalse;}if($("#nloginpwd").val()==""){
alert("密码不能为空");
$("#nloginpwd").focus();returnfalse;}returntrue;},/*
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();});});
效果图: