JavaScript - 表单验证实例

最新推荐文章于 2021-10-01 21:41:19 发布

陆讯

最新推荐文章于 2021-10-01 21:41:19 发布

阅读量1w

点赞数 4

分类专栏： JavaScript实例库文章标签： javascript 表单验证实例

本文链接：https://blog.csdn.net/wangzi11322/article/details/45287967

版权

JavaScript实例库专栏收录该内容

22 篇文章 9 订阅

订阅专栏

表单验证1

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单验证</title>
    <script type="text/javascript">
        //用户名非空，长度为6-14，只能包含数字、字母、下划线
        function checkUsername(){
            var username=document.getElementById("username").value;
            var usernameinfo=document.getElementById("usernameinfo");
            //alert(username.length);
            for(var i=0;i<username.length;i++){
                var s=username.toLowerCase().substring(i,i+1);
                if(!(s>=0&&s<=9)&&!(s>="a"&&s<="z")&&(s!="_")){
                    usernameinfo.innerHTML="用户名只能包含数字、字母、下划线!";
                    usernameinfo.style.color="#f00";
                }else{
                    usernameinfo.innerHTML="";
                }
            }

            if(username==""){
                usernameinfo.innerHTML="用户名不能为空！";
                usernameinfo.style.color="#f00";
            }else if(username.length<6||username.length>14){
                usernameinfo.innerHTML="用户名长度在6-14之间！";
                usernameinfo.style.color="#f00";
            }else{
                usernameinfo.innerHTML="";
            }
        }
    </script>
</head>
<body>
    <form action="success.html" method="post">
        名字：<input type="text" id="username" onblur="checkUsername();"/><span id="usernameinfo"></span><br/>
        出生日期：
        <select id="year">
            <option value="0">--年--</option>
            <script type="text/javascript">
                for(var i=1900;i<=new Date().getFullYear();i++){
                    document.write("<option value="+i+">"+i+"</option>");
                }
            </script>       
            </select>&nbsp;

            <select id="month">
            <option value="0">--月--</option>
            <script type="text/javascript">
                for(var i=1;i<=12;i++){
                    document.write("<option value="+i+">"+i+"</option>");
                }
            </script>       
            </select>&nbsp;

            <select id="day">                   
            <option value="0">--日--</option>
            <script type="text/javascript">
                for(var i=1;i<=31;i++){
                    document.write("<option value="+i+">"+i+"</option>");
                }
            </script>       
            </select>
    </form>
        <br/>
        <input type="submit" value="注册" />
</body>
</html>

表单验证2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单验证</title>
<script type="text/javascript">
    //校验输入
    function checkInput(){
        var flag=false;
        var username=$("username").value;
        var pwd=$("pwd").value;
        var repwd=$("repwd").value;
        var email=$("email").value;

        if(username==""){
            alert("用户名不能为空！");
        }else if(pwd==""){
            alert("密码不能为空！");
        }else if(pwd.length<6){
            alert("密码必须大于6位");
        }else if(pwd!=repwd){
            alert("密码不一致！");
        }else if(email.indexOf("@")==-1 ||email.indexOf(".")==-1){
            alert("邮箱格式不正确！");
        }else{
            flag=true;
        }

        //限定用户名不能包含数字
        for(var i=0;i<username.length;i++){
        var s=username.substring(i,i+1);
        if(!isNaN(s)){
        alert("用户名不能包含数字！")
            return false;
            }
        }
        return flag;
    }
        //获取焦点时清除原内容
        function clearUsername(){
            var username=$("username");
            username.style.border="1px solid #f00";
            if(username.value=="请输入正确的用户名"){
            username.value="";
            }
        }
        //失去焦点时检验用户名
        function  checkUsername(username){
            username.style.border="";
            if(username.value==""){
                $("usernameinfo").style.font="normal 15px 宋体";
                $("usernameinfo").style.color="#f00";
                $("usernameinfo").innerHTML="用户名不能为空";
                username.focus();
            }else if(username.value.length>14||username.value.length<6){
                $("usernameinfo").style.font="normal 15px 宋体";
                $("usernameinfo").style.color="#F00";
                $("usernameinfo").innerHTML="用户名长度必须在6-14之间！";
                //username.select();//此代码在IE和Chrome中好使，在Firefox中不好使
                //匿名函数
                setTimeout(function(){username.select();},0);               
            }else{
                $("usernameinfo").innerHTML="";
            }
        }

        function $(id){
            return document.getElementById(id);
        }
</script>
</head>
<body>
<form action="success.html" method="post" onsubmit="return checkInput();">
        <table border="0" cellpadding="0" cellspacing="0" width="600px">
            <tr>
                <td align="right">用户名：</td>
                <td><input type="text" name="userbname" id="username" value="请输入正确的用户名" onfocus="clearUsername()" onblur="checkUsername(this)"/><span id="usernameinfo"></span></td>
            </tr>
            <tr>
                <td align="right">密码：</td>
                <td><input type="password" name="pwd" id="pwd"/></td>
            </tr>
            <tr>
                <td align="right">确认密码：</td>
                <td><input type="password" name="repwd" id="repwd"/></td>
            </tr>
            <tr>
                <td align="right">电子邮箱：</td>
                <td><input type="text" name="email" id="email"/><br/></td>
            </tr>
            <tr>
            <td></td>
         <td>&nbsp;&nbsp;<input type="submit" value="注册"/>&nbsp;&nbsp;<input type="reset" value="重置"/></td>     
           </tr>
        </table>
</form>

</body>
</html>