jQuery/javascript实现网页注册的表单验证

最新推荐文章于 2022-11-22 10:34:00 发布

imHere·

最新推荐文章于 2022-11-22 10:34:00 发布

阅读量392

点赞数

分类专栏： HTML

HTML 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta charset="utf-8">
<title>注册表单验证</title>
<script src="jquery.js"></script>
<style type="text/css">
    table{background-color:pink;width:80%;height:300px;}
    td{text-align:center;}
</style>
<script language="javascript">
    $("document").ready(function(){
        $("#form1").submit(function(){
            var user=$("#user").val();
            var username=/^[a-z]{6,10}/i;
            if(user.length==0){
                $("#error1").html("账号不可以为空");
                return false;
            }else if(!username.test(user)){
                $("#error1").html("请输入6-10的字母");
                return false;
            }else{
                $("#error1").html("输入正确");
            }
            
            var password=$("#pw").val();
            var password1=/^[0-9]{6,10}/;
            if(password.length==0){
                $("#error2").html("密码不可以为空");
                return false;
            }else if(!password1.test(password)){
                    $("#error2").html("请输入6-10位的数字密码");
                    return false;
                }else{
                    $("#error2").html("输入正确");
                }
            
            var name=$("#name").val();
            var name1=/^[a-z]{6,10}/i;
            if(name.length==0){
                $("#error3").html("姓名不可以为空");
                return false;
            }else if(!name1.test(name)){
                $("#error3").html("请输入6-10位字母");
                return false;
            }else{
                $("#error3").html("输入正确");
            }
            
            
            var age=$("#ag").val();
            var age1=/^[1-9]{1}[0-9]{0,1}$/;
            if(age.length==0){
                $("#error4").html("年龄不可以为空");
                return false;
            }else if(!age1.test(age)){
                $("#error4").html("请输入合法年龄");
                return false;
            }else{
                $("#error4").html("输入正确");
            }
            
            var email=$("#em").val();
            var email1=/^[\w]+(\.[\w]+)*@[\w]+(\.[\w]+)+$/;
            if(email.length==0){
                $("#error5").html("email不可以为空");
                return false;
            }else if(!email1.test(email)){
                $("#error5").html("请输入合法电子邮件");
                return false;
            }else{
                $("#error5").html("输入正确");
            }
            
            var telephone=$("#tel").val();
            var telephone1=/^[1]{1}[0-9]{10}/;
            if(telephone.length==0){
                $("#error6").html("电话不可以为空");
                return false;
            }else if(!telephone1.test(telephone)){
                $("#error6").html("请输入合法电话");
                return false;
            }else{
                $("#error6").html("输入正确");
            }
            
        });
    });
</script>
</head>
<body>
<center>
<form action="" method="post" id="form1" name="form1">
    <h1>注册页面</h1>
    <table border="1px">
        <tr>
            <td>
                账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：
                <input type="text" name="admin" id="user"/>
                <div id="error1" style="display:inline;color:red;"></div>
            </td>
        </tr>
        <tr>    
            <td>
                密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：
                <input type="password" name="password" id="pw"/>
                <div id="error2" style="display:inline;color:red;"></div>
            </td>
        </tr>
        <tr>        
            <td>
                姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：
                <input type="text" name="name1" id="name"/>
                <div id="error3" style="display:inline;color:red;"></div>
            </td>
        </tr>
        <tr>
            <td>
                年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：
                <input type="text" name="age" id="ag"/>
                <div id="error4" style="display:inline;color:red;"></div>
            </td>
        </tr>
        <tr>
            <td>
                性别：
                <input type="radio" name="sex" value="boy"/>男
                <input type="radio" name="sex" value="girl"/>女    
            </td>
        </tr>
        <tr>
            <td>
                电子邮件：<input type="text" name="email" id="em"/>
                <div id="error5" style="display:inline;color:red;"></div>
            </td>
        </tr>
        <tr>        
            <td>
                电话号码：<input type="text" name="telephone" id="tel"/>
                <div id="error6" style="display:inline;color:red;"></div>
            </td>
        </tr>
        <tr>    
            <td align="center">
                    <input type="submit" value="注册"/>
                    
            </td>
            
        </tr>
    </table>
</form>    
</center>
</body>
</html>

<html>
<head>
<meta charset="utf-8">
<title>正则表达式表单验证</title>    
    <style type="text/css">
        table{background-color:yellow;border:2px blue solid;}
    </style>
</head>    
<body>
<center>
    <form action="login.html" method="post" onsubmit="return isForm()">
        <h1>注册页面</h1>
        <table border="1px" width="350px" height="400px">
            <tr>
                <td>
                    账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：
                    <input type="text" name="username" id="user"/>
                    <div id="error1" style="display:inline;color:red;"></div>
                </td>
            </tr>
            <tr>
                <td>
                    密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：
                    <input type="password" name="password" id="pw"/>
                    <div id="error2" style="display:inline;color:red;"></div>
                </td>
            </tr>
            <tr>
                <td>
                    姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：
                    <input type="text" name="name1" id="name"/>
                    <div id="error3" style="display:inline;color:red;"></div>    
                </td>
            </tr>
            <tr>
                <td>
                    性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：
                    <input type="radio" name="sex" value="boy"/>男
                        <input type="radio" name="sex" value="girl"/>女        
                </td>
            </tr>
            <tr>
                <td>
                    年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：
                    <input type="text" name="age" id="ag"/>
                    <div id="error4" style="display:inline;color:red;"></div>
                </td>
            </tr>
            <tr>
                <td>
                    电子邮件：<input type="text" name="email" id="em"/>
                    <div id="error5" style="display:inline;color:red;"></div>
                </td>
            </tr>
            <tr>
                <td>
                    电话号码：<input type="text" name="telephone" id="tel"/>
                    <div id="error6" style="display:inline;color:red;"></div>
                </td>
            </tr>
            <tr>
                <td align="center">
                    <input type="submit" value="注册"/>
                </td>
            </tr>
        </table>
    </form>
    <script language="javascript">
        function isForm(){
            var username=document.getElementById("user").value;
            var password=document.getElementById("pw").value;
            var name=document.getElementById("name").value;
            var age=document.getElementById("ag").value;
            var email=document.getElementById("em").value;
            var telephone=document.getElementById("tel").value;
            
            
            var error1=document.getElementById("error1");
            var error2=document.getElementById("error2");
            var error3=document.getElementById("error3");
            var error4=document.getElementById("error4");
            var error5=document.getElementById("error5");
            var error6=document.getElementById("error6");
            
            var username1=/^[a-z]{6,10}/i;
            var password1=/^[0-9]{6,10}/;
            var name1=/^[a-z]{6,10}/i;
            var age1=/^[1-9]{1}[0-9]{0,1}$/;
            var email1=/^[\w]+(\.[\w]+)*@[\w]+(\.[\w]+)+$/;
            var telephone1=/^[1]{1}[0-9]{10}/;
            
            
            
            if(!username1.test(username)){
                alert("请输出6-10位字母");
                return false;
            }
            error1.innerHTML="输入正确";
            if(!password1.test(password)){
                alert("请输入6-10的数字密码");
                return false;
            }
            error2.innerHTML="输入正确";
            if(!name1.test(name)){
                alert("请输入6-10位字母");
                return false;
            }
            error3.innerHTML="输入正确";
            if(!age1.test(age)){
                alert("请输入合法的年龄");
                return false;
            }
            error4.innerHTML="输入正确";
            if(!email1.test(email)){
                alert("请输入合法电子邮件");
                return false;
            }
            error5.innerHTML="输入正确";
            if(!telephone1.test(telephone)){
                alert("请输人电话联系方式");
                return false;
            }
            error6.innerHTML="输入正确";
            return true;
        }
    
    </script>
</center>    
</body>
</html>

imHere·

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery/javascript实现网页注册的表单验证

<html><head><meta charset="utf-8"><title>注册表单验证</title><script src="jquery.js"></script><style type="text/css"> table{background-color:pink;wi...
复制链接

扫一扫

专栏目录