javascript中利用正则表达式实现表单验证

来源：互联网发布：泥石流网络意思编辑：程序博客网时间：2024/05/04 18:47

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <head>
    <script type="text/javascript">
    function $(id){
        return document.getElementById(id);
    }

    function checkEmail(){
        while(true){
        $("mail").innerHTML="";
        var reg = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
            var email = $("email").value;
            if(email==""){
                $("mail").innerHTML="email不能为空";
                return false;
            }
            if(reg.test(email)==false){
                $("mail").innerHTML="email格式不正确";
                return false;
            }
            $("mail").innerHTML="√";
            return true;
            break;
            }
        }
    function checkpwd(){
        while(true){
   $("ps").innerHTML="";
   var reg =/^\S{6,16}$/;
        var password = $("pwd").value;
        if(password==""){
            $("ps").innerHTML= "密码不能为空";
            return false;
        }

        if(reg.test(password)==false){
            $("ps").innerHTML="密码的长度必须在6-16之间";
            return false;
        }
        $("ps").innerHTML="√";
        return true;
        break;
        }
    }
    function checkrepwd(){
        while(true){
   $("reps").innerHTML="";
        if($("pwd").value!=$("repwd").value){
            $("reps").innerHTML="密码不一致，请重新输入！";
            return false;
        }
        $("reps").innerHTML="√";
        return true;
        break;
        }
    }

    function checkUsname(){
        while(true){
   $("name").innerHTML="";
   var reg = /^[a-zA-Z][a-zA-Z0-9]{4,15}$/;
        var username=document.getElementById("username").value;
        if(username==""){
            $("name").innerHTML="用户名不能为空";
            return false;
        }
        for(var i=0;i<username.length;i++){
            var j=username.substring(i,i+1);
            if(reg.test(username)==false){
                $("name").innerHTML="用户名不能以数字开头，且最少5位，最多15位";
                return false;
            }

        }
        $("name").innerHTML="√";
        return true;
        break;
    }
    }
    function check(){
        if(checkUsername&&checkpwd()&&checkrepwd()&&checkEmail()){
            return true;
        }else{
            return false;
        }
    }
    </script>
    </head>
    <body>
    <form method="post" onSubmit="return check()">
    <table width="70%" >
        <tbody>
            <tr >
                <td colspan="2" >user register</td>
            </tr>
            <tr>
                <td>username</td>
                <td><input type="text" id="username" onBlur="checkUsname()"/><span

id="name"></span></td>
            </tr>
            <tr>
                <td>password</td>
                <td><input type="password" id="pwd"/ onblur="checkpwd()"><span

id="ps"></span></td>
            </tr>
            <tr>
                <td>repassword</td>
                <td><input type="password" id="repwd" onBlur="checkrepwd()"/><span

id="reps"></span></td>
            </tr>
            <tr>
                <td>email</td>
                <td><input type="text" id="email" onBlur="checkEmail()"/><span

id="mail"></span></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" id="sbm"/>  <input

type="reset" id="rst"/></td>
            </tr>
    </table>
    </form>
    </body>
    </html>