非跳转当页ajax验证表单提示
非跳转当页ajax验证表单提示
鱼鱼鱼鱼yu 发表于3年前
非跳转当页ajax验证表单提示
  • 发表于 3年前
  • 阅读 27
  • 收藏 3
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: 有时候做表单提交的时候需要在本页验证表单数据,而不是跳转的方式提醒,运用ajax即时验证增加用户体验

效果图:

点击提交时触发事件验证表单数据

 

1.在提交时增加一个方法,在form增加 onsubmit="return submitPwdInfo();"提交时触发submitPwdInfo

2.在submitPwdInfo中增加验证逻辑

 

/* *
 * 会员找回密码时,对输入作处理
 * ajax的参数async:false, 设置为false,即同步请求,在这里可以简单理解为等到有返回值ajax才会继续执行下,
 * 先声明一个变量flag,然后根据执行结果赋予flag值,最后返回flag即可
 */
 function submitPwdInfo(){
	 var flag = true;
	 var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
	 
	 var email = $('#email').val();
	 var captcha = $('#captcha').val();
	 
	 $.ajax({
         type:'post',
         async: false,
         url:"{:U('User/resetPass')}",
         //cache:false,
         data:'email='+email+'&captcha='+captcha,
         success:function(data){
        	 if (email == ''){
                 $('#info').text(msg_email_blank);
                 flag = false;
             } else if (captcha == ''){
                 $('#captchaInfo').text(msg_captcha_blank);
                 flag = false;
             } else if (!myreg.test(email)) {
                 $('#info').text(msg_email_format);
                 flag = false;
             } else if(data.status !== 3){
            	 $('#info').text(data.info);
            	 flag = false;
             } else if (data.status == 3) {
            	alert(data.info);
            	 flag = true;
             }
         }
     });
	 return flag; 
}

3.验证完成

标签: ajax验证表单
共有 人打赏支持
粉丝 10
博文 22
码字总数 9557
×
鱼鱼鱼鱼yu
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: