A-A+

jquery的登录注册内容的提交

2016年01月13日 前端设计 暂无评论 阅读 6 views 次

登录注册内容的提交效果我们现在做得越来越好看了,今天我们一起来看一个登录注册内容的提交的例子。

网页中的登录注册是很普遍的,但是在项目中 ,我是第一次接触到登录注册内容的提交,于是自己整理下,下面我就介绍一下我整理的内容。

首先,要在前端页面中写出 登录注册的需要的input框,这是基本内容,这里就不详细介绍了。接着就开始介绍提交登录注册的内容了,我将它分为下面几个部分:

1、注册登录的提交需要所有的内容都不为空且正确时才可以提交的上去,否则有空白提醒或者错误提醒!所以,设置一个flag值,一开始将flag值设为1,但只要当一项所填项空白或者错误时,将flag值设为0,而且只有当flag为1时,才提交数据,代码如下:

  1. if(flag){  
  2. $(“form”).submit();  
  3. }  

2、验证时,名字、验证码等用判空,密码,手机号,邮箱,qq等用正则判断格式是否正确:

a、先将正确的格式定义正则:

  1. var flag = 1;  
  2. $(“.errorTips”).remove();  
  3. var regtel = /^[0-9a-zA-Z]+@(([0-9a-zA-Z]+)[.])+[a-z]{2,4}$/i;  
  4. var regmail = /.+@.+\.[a-zA-Z]{2,4}$/;  
  5. var regqq= /[1-9][0-9]{4,}/;  
  6. var regpsw = /^[0-9a-zA-Z]{6,16}/;  

b、再判断名字、验证码:

  1. if($(“.name”).val()==””){  
  2. flag=0;  
  3. var text =”<span class=’red-tips errorTips’>请填写姓名</span>”;  
  4. $(“.name”).parent().append(text);  
  5. }  
  6. if($(“.code”).val()==””){  
  7. flag=0;  
  8. var text =”<span class=’red-tips errorTips’>请填写验证码</span>”;  
  9. $(“.code”).parent().append(text);  
  10. }  

c、最后用定义的正则判断密码等:

  1. if(!(regpsw.test($(“.password”).val()))){  
  2. flag=0;  
  3. var text =”<span class=’red-tips errorTips’>请正确填写密码(1、长度为6-16个字符;2、只能有数字和英文组成)</span>”;  
  4. $(“.password”).parent().append(text);  
  5. }  
  6. if($(“.confirm_password”).val()!==$(“.password”).val()){  
  7. flag=0;  
  8. var text =”<span class=’red-tips errorTips’>两次密码填写不一致</span>”;  
  9. $(“.confirm_password”).parent().append(text);  
  10. }  
  11. if($(“.role”).val()==””){  
  12. flag=0;  
  13. var text =”<span class=’red-tips errorTips’>请填写角色信息</span>”;  
  14. $(“.role”).parent().append(text);  
  15. }  
  16. if(!(regqq.test($(“.qq”).val()))){  
  17. flag=0;  
  18. var text =”<span class=’red-tips errorTips’>请正确QQ号</span>”;  
  19. $(“.qq”).parent().append(text);  
  20. }  

另外,空白提醒、错误提醒是在判断它是错误或者空白时才定义并且用append(text)追加上:

  1. var text =”<span class=’red-tips errorTips’>请正确QQ号</span>”;  
  2. $(“.qq”).parent().append(text);  
标签:

给我留言