资讯专栏INFORMATION COLUMN

JQuery表单验证(包括:用户名,手机号,密码,确认密码,验证码60s)

Anshiii / 2262人阅读

摘要:每个项目中都会有登录注册模块的一些验证。比如说用户名我们要验证位数和是否符合用户名规则密码要验证字母开头,长度,是否包含下划线等等,这里我总结了一下常用的验证规则,用的是项目中用到的和如果自己用到的话要对名称做相应的修改。

每个项目中都会有登录注册模块的一些验证。比如说:用户名我们要验证位数和是否符合用户名规则;密码要验证字母开头,长度,是否包含下划线等等,这里我总结了一下常用的验证规则,用的是项目中用到的class和id ,如果自己用到的话要对名称做相应的修改。


验证用户名的方法:

</>复制代码

  1. function username() {
  2. //reg1 = /^[a-zA-Z][a-zA-Z0-9_]{3,15}$/;// 帐号是否合法(字母开头,允许4-16字节,允许字母数字下划线)
  3. var reg = /^[0-9a-zA-Z_u3E00-u9FA5]{3,15}$/;//4-16字节,允许字母数字下划线
  4. var userName = $("#userName").val();
  5. if (userName == "") {
  6. $("#userNamePrompt").addClass("errorTextColor");
  7. $("#userNamePrompt").html("用户名不能为空!");
  8. return false;
  9. } else if (!reg.test(userName)) {
  10. $("#userNamePrompt").addClass("errorTextColor");
  11. $("#userNamePrompt").html("不正确的用户名格式!");
  12. return false;
  13. } else {
  14. var userFlag = false;
  15. $.ajaxSetup({
  16. async : false
  17. });
  18. $.ajax({
  19. url : "user/checkUserName.do",
  20. data : {
  21. userName : $("#userName").val()
  22. },
  23. success : function(data) {
  24. if (data != "1") {
  25. $("#userNamePrompt").addClass("errorTextColor");
  26. $("#userNamePrompt").html(""+data);
  27. //userNamePrompt.innerHTML = data.fontcolor("red");
  28. } else {
  29. $("#userNamePrompt").html("");
  30. return userFlag = true;
  31. }
  32. }
  33. });
  34. return userFlag;
  35. }
  36. }

验证手机号的方法 :

</>复制代码

  1. function phone() {
  2. var reg = /^0?(13[0-9]|15[012356789]|17[0678]|18[0123456789]|14[57])[0-9]{8}$/;
  3. if ($("#telNo").val() == "") {
  4. $("#phonePrompt").addClass("errorTextColor");
  5. $("#phonePrompt").html("手机号码不能为空!");
  6. /*$("#codeMsg").hide();*/
  7. return false;
  8. } else if ($("#telNo").val().length < 11) {
  9. $("#phonePrompt").addClass("errorTextColor");
  10. $("#phonePrompt").html("手机号码长度有误!");
  11. /*$("#codeMsg").hide();*/
  12. return false;
  13. } else if (!reg.test($("#telNo").val())) {
  14. $("#phonePrompt").addClass("errorTextColor");
  15. $("#phonePrompt").html("手机号不存在!");
  16. /*$("#codeMsg").hide();*/
  17. return false;} else {
  18. var phoneFlag = false;
  19. $.ajaxSetup({
  20. async : false
  21. });
  22. $.get("user/checkPhone.do",{
  23. type : 0,
  24. telNo : $("#telNo").val()
  25. }, function(data) {
  26. if (data != "1") {
  27. $("#phonePrompt").addClass("errorTextColor");
  28. $("#phonePrompt").html(""+data);
  29. //telInfo.innerHTML = data.fontcolor("red");
  30. } else {
  31. $("#phonePrompt").html("");
  32. $("#codeMsg").show();
  33. return phoneFlag = true;
  34. }
  35. });
  36. return phoneFlag;
  37. }
  38. }

密码的验证方法 :

</>复制代码

  1. function password() {
  2. //reg2 = /^[a-zA-Z]w{5,17}$/;// 密码(以字母开头,长度在6~18之间,只能包含字母、数字和下划线)
  3. reg2 = /^[a-zA-Z]w{5,17}$/;
  4. var reg = /[u4E00-u9FA5]/;
  5. var userPwd = $("#userPwd").val();
  6. if (userPwd == "") {
  7. $("#newPwdPrompt").addClass("errorTextColor");
  8. $("#newPwdPrompt").html("密码不能为空!");
  9. $(".regQrshow").hide();
  10. return false;
  11. } else if (userPwd.length < 6 || userPwd.length > 16) {
  12. $("#newPwdPrompt").addClass("errorTextColor");
  13. $("#newPwdPrompt").html("长度不符合!");
  14. $(".regQrshow").hide();
  15. return false;
  16. } else if(reg.test(userPwd)){
  17. $("#newPwdPrompt").addClass("errorTextColor");
  18. $("#newPwdPrompt").html("密码不能有中文!");
  19. $(".regQrshow").hide();
  20. } else {
  21. return true;
  22. }

确认密码的验证方法 :

</>复制代码

  1. function repassword() {
  2. /*这样的写法ie浏览器下会报错*/
  3. /*var pwd = $("#userPwd").val().trim();*/
  4. /*var repwd = $("#userPwdAgain").val().trim();*/
  5. var a=$("#userPwd").val();
  6. var pwd=$.trim(a);
  7. var b=$("#userPwdAgain").val();
  8. var repwd=$.trim(b);
  9. if (pwd == "") {
  10. $("#rePwdPrompt").addClass("errorTextColor");
  11. $("#rePwdPrompt").html("密码不能为空!");
  12. return false;
  13. } else if (pwd !== repwd) {
  14. $("#rePwdPrompt").addClass("errorTextColor");
  15. $("#rePwdPrompt").html("两次密码不一致");
  16. return false;
  17. } else {
  18. $("#rePwdPrompt").addClass("errorTextColor");
  19. $("#rePwdPrompt").html("");
  20. //setFlag($("#userPwdAgain"));
  21. return true;
  22. }
  23. }

60s重新获取验证码

</>复制代码

  1. var wait = 60;
  2. function time(btn) {
  3. if (wait == 0) {
  4. $("#voice").removeAttr("disabled");
  5. $("#msg").removeAttr("disabled");
  6. $("#voice").val("语音验证");
  7. $("#msg").val("短信验证");
  8. wait = 60;
  9. } else {
  10. btn.attr("disabled", true);
  11. btn.val(wait + "秒后重发");
  12. wait--;
  13. setTimeout(function(){
  14. time(btn);
  15. },1000)
  16. }
  17. }

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50675.html

相关文章

  • JQuery表单验证(包括:户名,机号,,确认,验证60s)

    摘要:每个项目中都会有登录注册模块的一些验证。比如说用户名我们要验证位数和是否符合用户名规则密码要验证字母开头,长度,是否包含下划线等等,这里我总结了一下常用的验证规则,用的是项目中用到的和如果自己用到的话要对名称做相应的修改。 每个项目中都会有登录注册模块的一些验证。比如说:用户名我们要验证位数和是否符合用户名规则;密码要验证字母开头,长度,是否包含下划线等等,这里我总结了...

    szysky 评论0 收藏0
  • JQuery表单验证(包括:户名,机号,,确认,验证60s)

    摘要:每个项目中都会有登录注册模块的一些验证。比如说用户名我们要验证位数和是否符合用户名规则密码要验证字母开头,长度,是否包含下划线等等,这里我总结了一下常用的验证规则,用的是项目中用到的和如果自己用到的话要对名称做相应的修改。 每个项目中都会有登录注册模块的一些验证。比如说:用户名我们要验证位数和是否符合用户名规则;密码要验证字母开头,长度,是否包含下划线等等,这里我总结了...

    anyway 评论0 收藏0
  • AngularJS自定义表单验证

    摘要:在自定义的指令中,我们可以添加我们的验证方法到的对象上。验证码在表单不合法时禁用提交按钮提交保存成功判断手机号是否重复验证两次输入的密码是否相同的自定义验证当值为空时,通过验证,因为有 Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox),也实现了很多指令做为验证(required,...

    gaomysion 评论0 收藏0
  • AngularJS自定义表单验证

    摘要:在自定义的指令中,我们可以添加我们的验证方法到的对象上。验证码在表单不合法时禁用提交按钮提交保存成功判断手机号是否重复验证两次输入的密码是否相同的自定义验证当值为空时,通过验证,因为有 Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox),也实现了很多指令做为验证(required,...

    cocopeak 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<