javascript（表单验证）

最新推荐文章于 2025-10-31 13:36:39 发布

原创最新推荐文章于 2025-10-31 13:36:39 发布 · 460 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

这篇博客介绍了正则表达式的基础用法，包括取反、出现次数的控制等，并展示了在用户名和密码验证中的应用。同时，讨论了如何使用JavaScript内置的字符串方法进行表单验证，如检查用户名长度、字符类型等。最后提供了一个简单的HTML表单提交事件的示例。

基础的正则表达式：

取反：abc

[abc] abc随便一个

[abc]{6} 必须6次

/d [0-9] 数字

/w [a-zA-Z0-9] 随便一个字符

/s 空格

至少出现1次：+

出现1次或者0次：?

出现任意次：*

真正的点：. 或者：|

[a-g]{3}:在a-g中任选1个重复3次例如：abc [a-g]{3,}:

在a-g中任选1个至少重复3次例如：abcd

[a-g]{3,4}:在a-g中任选1个重复3次-4次例如：abcc

/*用户名验证*/   
function checkUser(){
  var user=$("user");
  var userId=divId("user_prompt");
   userId.innerHTML=""; 
  var reg=/^[a-zA-Z][a-zA-Z0-9]{3,15}$/;    
    //reg验证表单是否符合正则
    if(reg.test(user)==false){
       userId.innerHTML="用户名不正确";
    return false;
      }
      return true;
    }
/*密码验证*/    
function checkPwd(){
  var pwd=$("pwd");
  var pwdId=divId("pwd_prompt");
   pwdId.innerHTML="";  
  var reg=/^[a-zA-Z0-9]{4,10}$/;    
    if(reg.test(pwd)==false){
       pwdId.innerHTML="密码不能含有非法字符，长度在4-10之间";
    return false;
      }
      return true;
    }

//匹配Email地址的正则表达式：
reg=/w+([-+.]\w+)@\w+([-.]\w+)*\.\w+([-.]\w+)/;
//匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：
reg=/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
//匹配腾讯QQ号：
reg=/[1-9][0-9]{4,}/;
//匹配身份证：
reg=\d{15}|\d{18}

利用内置对象string提供的方法实现表单验证：

1.截取：substr(指定位置开始截取,截取几位数字) substring()截取的是两个数字之间的字符

2.长度：length

3.判断是否有空格：trim

4.替换：replace

5.分割：split

6.大小写转换：toUppercase|toLowercase

/*用户名长度不能小于6位*/
if(user.length<6){
    alert("用户名长度不能小于6位");
    return false;
    }
/*用户名只能是字母和数字*/ 
var users=user.toLowerCase();
 for(var i=0;i<users.length;i++){
         var charTest=users.charAt(i);
         if( (!(charTest>='0' && charTest<='9')) &&  (!(charTest>='a' && charTest<='z')))
         {
          alert("用户名包含非法字符，只能包括字母,数字");
          return false;
          }
      }

onsubmit:表单组织提交事件(位于from表单上)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- action='' (提交的地址) -->
        <!-- method='' (提交数据的请求方式) get post -->
        <form action="" method="get" onsubmit="return myf()">
            账号：<input type="text" id="user" />
            密码：<input type="password" />
            <input type="submit" src="注册" />
        </form>
    </body>
</html>