案例-使用JS完成表单的校验

最新推荐文章于 2023-05-13 11:28:03 发布

可口口可

最新推荐文章于 2023-05-13 11:28:03 发布

阅读量635

点赞数 1

分类专栏： JavaScript 文章标签： javascript 正则表达式开发语言

本文链接：https://blog.csdn.net/weixin_48351326/article/details/126926467

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用JS完成表单的校验

1. 案例需求

在这里插入图片描述

用户名输入框、手机号码 , 失去焦点进行校验
用户名：只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
手机号：以1开头, 第二位是3,4,5,7,8的11位数字 /^1[34578]\d{9}$/

2.思路分析

给用户名输入框设置获得焦点事件

<input type="text" onfocus="showTips()"/>

创建showTips()函数提示

function showTips(){
	//1.获得用户名输入框后面的span标签
	//2.调用innerHTML插入提示
}

给用户名输入框设置失去焦点事件

<input type="text" onblur="checkUsername()"/>

创建checkUsername()函数

function checkUsername(){
	//1.获得用户输入的用户名
	//2.使用正则表达式进行校验
	//3.判断是否符合规则, 提示
}

3.代码实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>验证注册页面</title>
        <style type="text/css">
			body {
				margin: 0;
				padding: 0;
				font-size: 12px;
				line-height: 20px;
			}
			.main {
				width: 525px;
				margin-left: auto;
				margin-right: auto;
			}
			.hr_1 {
				font-size: 14px;
				font-weight: bold;
				color: #3275c3;
				height: 35px;
				border-bottom-width: 2px;
				border-bottom-style: solid;
				border-bottom-color: #3275c3;
				vertical-align: bottom;
				padding-left: 12px;
			}
			.left {
				text-align: right;
				width: 80px;
				height: 25px;
				padding-right: 5px;
			}
			.center {
				width: 280px;
			}
			.in {
				width: 130px;
				height: 16px;
				border: solid 1px #79abea;
			}

			.red {
				color: #cc0000;
				font-weight: bold;
			}

			div {
				color: #F00;
			}
        </style>
        <script type="text/javascript">
        </script>
    </head>

    <body>
        <form action="#" method="post" id="myform" onsubmit="return checkForm()">
            <table class="main" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td><img src="img/logo.jpg" alt="logo" /><img src="img/banner.jpg" alt="banner" /></td>
                </tr>
                <tr>
                    <td class="hr_1">新用户注册</td>
                </tr>
                <tr>
                    <td style="height:10px;"></td>
                </tr>
                <tr>
                    <td>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td class="left">用户名：</td>
                            <td class="center">
                                <!--给用户名输入框绑定失去焦点事件-->
                                 <input id="username" name="user" type="text" class="in" onblur="checkUsername(this.value)"/>
                                 <span id="usernamespan" style="color: red">

                                 </span>
                            </td>
                        </tr>
                        <tr>
                            <td class="left">密码：</td>
                            <td class="center">
                            <input id="pwd" name="pwd" type="password" class="in" />
                            </td>
                        </tr>
                        <tr>
                            <td class="left">确认密码：</td>
                            <td class="center">
                            <input id="repwd" name="repwd" type="password" class="in"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="left">电子邮箱：</td>
                            <td class="center">
                            <input id="email" name="email" type="text" class="in"/>
                            </td>
                        </tr>
                        <tr>
                           <!-- 以1开头, 第二为是3,4,5,7,8的11位数字-->
                            <td class="left">手机号码：</td>
                            <td class="center">
                                <!--手机号输入框绑定失去焦点事件-->
                                 <input id="mobile" name="mobile" type="text" class="in" onblur="checkPhone(this.value)"/>
                                 <span id="mobilespan" style="color: red"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="left">生日：</td>
                            <td class="center">
                            <input id="birth" name="birth" type="text" class="in"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="left">&nbsp;</td>
                            <td class="center">
                            <input name="" type="image" src="img/register.jpg" />
                            </td>
                        </tr>
                    </table></td>
                </tr>
            </table>
        </form>
    <script>
        //声明一个校验用户名的方法
        function checkUsername(value) {
            //使用正则表达式校验用户名
            //只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
            //1. 编写一个正则表达式
            var reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/
            //2. 使用正则表达式取校验用户名
            if (reg.test(value)) {
                //校验通过
                //1. 找到用户名输入框后面的那个span
                var element = document.getElementById("usernamespan");
                //2. 设置span的标签体的内容是一个图片标签
                element.innerHTML = "<img src='img/gou.png' width='35' height='15\'/>"
            }else {
                //校验不通过
                //1. 找到用户名输入框后面的那个span
                var element = document.getElementById("usernamespan");
                //2. 设置span的标签体的内容为"用户名格式不正确"
                element.innerHTML = "用户名格式不正确"
            }
        }


        function checkPhone(value) {
            //1. 声明一个正则表达式：以1开头, 第二位是3,4,5,7,8的11位数字
            var reg = /^[1][34578][0-9]{9}$/
            //2. 使用正则表达式校验手机号
            if (reg.test(value)) {
                //校验通过
                //找到手机号输入框后面的span
                var element = document.getElementById("mobilespan");
                //设置span中的内容为钩的图片
                element.innerHTML = "<img src='img/gou.png' width='35' height='15\'/>"
            }else {
                //校验不通过
                //找到手机号输入框后面的span
                var element = document.getElementById("mobilespan");
                //设置span中的内容为手机号格式不正确
                element.innerHTML = "手机号格式不正确"
            }
        }
    </script>
    </body>
</html>