静态注册页面+正则校验表单【JavaScript和JQuery两种实现】_静态页面登录注册正则表达式-CSDN博客

本文链接：https://blog.csdn.net/qq_40454863/article/details/114199004

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style type="text/css">
        /*将所有标签默认的内外边距清除*/
        *{
            margin: 0px;
            padding: 0px;
            /*元素宽由width=content变为content+padding+border*/
            box-sizing: border-box;
        }
        html{
            height: 100%;
        }
        body{ /*背景图片 不重复铺设 居中*/
            background:url("img/rg_bg.jpg") no-repeat center ;
            background-size: 100% 100% ;
        }
        .rg_layout{  /*设置注册表布局框，背景颜色白色，分为三部分*/
            width: 900px;
            height: 550px;
            border: 8px solid #EEEEEE;
            background-color: white;
            /*--让div水平居中auto*/
            margin: auto;

           margin-top: 80px;

        }
        .rg_left{  /*白色注册框中左边部分*/
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }
        /*设置左部分p标签中文字属性*/
        .rg_left >p:first-child{ /*该类选择器下第一个p标签以及最后一个标签*/
            color:#FFD026;
            font-size: 20px;

        }
        .rg_left>p:last-child{
            color:#A6A6A6;
            font-size: 20px;

        }
        /*白色注册框中间部分*/
        .rg_center{
            /*border: 1px solid red;*/
            float: left;
            width: 540px;
        }
        /*白色注册框右边部分*/
        .rg_right{
            /*border: 1px solid red;*/
            float: right;
            margin: 15px;
        }
        /*白色注册框右边部分文字属性*/
        .rg_right>p:first-child{
            font-size: 15px;
        }
        .rg_right p a{
            color: pink;
        }
        .td_left{ /*设置注册表左列元素的属性文本右对齐以及宽高*/
            width: 100px;
            text-align: right;/*文本右对齐*/
            height: 45px;
        }
        .td_right{/*设置注册表右列左内边距使input组件与右列左边界有空间*/
            padding-left: 50px;
        }/*并集选择器*/
        #username,#password,#email,#company,#majory,#tel,#birthday{/*设置注册表右列input组件属性并让里面文字有左边距*/
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6; /*灰色*/
            border-radius: 5px; /*设置圆角*/
            padding-left: 10px; /*设置input组件内左边距*/

        }
        
        #btn_sub{   /*注册按钮属性设置*/
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026;/*消除边框(颜色与按钮背景颜色同)*/
        }
        .error{    /*用户名密码验证失败所显示的文字的属性*/
            color: red;
        }
        #td_sub{  /*设置注册按钮在该行中的位置，用内边距*/
            padding-left: 150px;

        }
    </style>
    <script type="text/javascript">
     
        //页面都加载完成后开始执行下面的function
        window.onload=function () {
            //1.给表单form绑定onsubmit事件
            document.getElementById("form").onsubmit=function () {
               //提交按钮接收到true后才会进行提交
                return checkUsername()&&checkPassword()&&checkEmail()&&checkPhoneNum()&&checkCompany()&&checkMajory();
            }
            //分别绑定离焦事件
            //实现输入信息然后鼠标离开时就开始验证
            document.getElementById("username").onblur=checkUsername;
            document.getElementById("password").onblur=checkPassword;
            document.getElementById("email").onblur=checkEmail;
            document.getElementById("tel").onblur=checkPhoneNum;
            document.getElementById("company").onblur=checkCompany;
            document.getElementById("majory").onblur=checkMajory;

        }
        
        //校验专业表单项非空
        function checkMajory(){
        	//获取表单项值
        	var majory=document.getElementById("majory").value;
        	//获取提示信息的span元素
        	var s_majory=document.getElementById("s_major");
        	//判空
        	if(majory==null||majory==""){
        		s_majory.innerHTML="专业信息不能为空"; //*向元素中写入提示信息*/
        		return false;
        	}
        	s_majory.innerHTML="<img src='img/对勾.jpg' width='23px' height='23px'";
        	return true;
        }
 
   		//校验院校表单项非空
   		function checkCompany(){
   			var company=document.getElementById("company").value;
   			var s_company=document.getElementById("s_company");
   			if(company==null||company==""){
   				s_company.innerHTML="院校信息不能为空";
   				return false;
   			}
   			s_company.innerHTML="<img src='img/对勾.jpg' width='23px' height='23px' />";
   			return true;
   		}
			
		//校验手机号
		function checkPhoneNum(){
			var tel=document.getElementById("tel").value;
			var reg_tel=/^1[3|4|5|7|8][0-9]{9}$/;
			var flag=reg_tel.test(tel);
			var s_tel=document.getElementById("s_tel");
			if(flag){
				s_tel.innerHTML="<img src='img/对勾.jpg' width='23px' height='23px' />";
			}else{
				s_tel.innerHTML="手机号格式有误";
			}
			return flag;
		}
        
        //校验邮箱方法
        function checkEmail(){
        	//1.获取邮箱
        	var email=document.getElementById("email").value;
        	//2.定义正则表达式
        	var reg_email =/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;;
        	//3.字符串与正则匹配
        	var flag=reg_email.test(email);
        	//4.提示信息
        	var s_email=document.getElementById("s_email");
        	if(flag){
        		s_email.innerHTML="<img src='./img/对勾.jpg' width='23px' height='23px'>";
        	}else{
        		s_email.innerHTML="邮箱格式有误";
        	}
        	return flag;
        }
        
        //校验密码方法
        function checkPassword(){
            //1.获取密码的值(文本输入框值)
            var password=document.getElementById("password").value;
            //2.定义正则表达式
            var reg_password=/^\w{6,12}$/;  //6-12位单词和字符构成
            //3.判断值是否符合正则的规则
            var flag=reg_password.test(password);
            //4.提示信息
            var s_password=document.getElementById("s_password");
            if(flag){
                //提示绿色对勾
                //在js中通过innerHTML向span标签中插入img标签或者文本字符。
                s_password.innerHTML="<img src='./img/对勾.jpg' width='23px' height='23px'>";
            }else{
                //提示红色用户名有误
                s_password.innerHTML="密码格式有误";

            }
            return flag;
        }

        //校验用户名方法
        function checkUsername(){
            //1.获取用户名的值(文本输入框值)
            var username=document.getElementById("username").value;
            //2.定义正则表达式
            var reg_username=/^\w{6,12}$/;  //6-12位单词和字符构成
            //3.判断值是否符合正则的规则
            var flag=reg_username.test(username);
            //4.提示信息
            var s_username=document.getElementById("s_username");
            if(flag){
                //提示绿色对勾
                //在js中通过innerHTML向span标签中插入img标签或者文本字符。
                s_username.innerHTML="<img src='./img/对勾.jpg';width='23px'; height='23px'>"
            }else{
                //提示红色用户名有误
                s_username.innerHTML="用户名格式有误";
            }
            return flag;
        }
    </script>
</head>
<body class="body">
    <div class="rg_layout">
        <div class="rg_left">
            <p >新用户注册</p>
            <p> USER REGISTER</p>
        </div>
        <div class="rg_center">
           <div class="rg_form">
               <!--定义表单form-->
               <form action="#" method="post" id="form">
                   <table >
                       <tr>
                           <td class="td_left"><label for="username">用户名</label></td>
                           <td class="td_right">
                               <input type="text" name="username" id="username" placeholder="请输入用户名">
                               <span id="s_username" class="error"></span>
                           </td>
                       </tr>
                       <tr>
                           <td class="td_left"><label for="password">密码</label></td>
                           <td class="td_right">
                               <input type="password" name="password" id="password" placeholder="请输入密码">
                               <span id="s_password" class="error"></span>
                           </td>
                       </tr>
                       <tr>
                           <td class="td_left"><label for="email">Email</label></td>
                           <td class="td_right">
                           		<input type="email" name="email" id="email" placeholder="请输入邮箱">
                           		<span id="s_email" class="error"></span>
                           </td>
                           
                       </tr>
                        <tr>
                           <td class="td_left"><label for="company">院校</label></td>
                           <td class="td_right">
                           		<input type="text" name="company" id="company" placeholder="请输入院校">
                           		<span id="s_company" class="error"></span>
                           </td>
                       </tr>
                       <tr>
                           <td class="td_left"><label for="majory">专业</label></td>
                           <td class="td_right">
                           		<input type="text" name="majory" id="majory" placeholder="请输入专业">
                           		<span id="s_major" class="error"></span>
                           </td>
                       </tr>
                       <tr>
                           <td class="td_left"><label for="tel">手机号</label></td>
                           <td class="td_right">
                           		<input type="tel" name="tel" id="tel" placeholder="请输入手机号">
                           		<span id="s_tel" class="error"></span>
                           </td>
                       </tr>
                       <tr>
                           <td class="td_left"><label>性别</label></td>
                           <td class="td_right"><input type="radio" name="gender" value="male">男
                               <input type="radio" name="gender" value="female">女
                           </td>
                       </tr>
                       <tr>
                           <td class="td_left"><label for="birthday">出生日期</label></td>
                           <td class="td_right"><input type="date" name="birthday" id="birthday"></td>
                       </tr>
                       <tr>
                           <td class="td_left"><label>参赛语言</label></td>
                           <td class="td_right">
                           		<select name="language">
                           			<option value="C++">C++</option>
                           			<option value="Java">Java</option>
                           			<option value="JavaScript">JavaScript</option>
                           			<option value="Python">Python</option>
                           		</select>
                           </td>
                       </tr>
                       <tr>
                           <td class="td_left"><label for="agreement">协议</label></td>
                           <td class="td_right"><textarea rows="1">1. 参加全国竞赛的项目从省级竞赛获奖项目按规定名额择优推荐。2. 申报项目必须是从当年7月1日往前推不超过两年时间内完成的。</textarea></td>
                       </tr>
                           <td colspan="2" id="td_sub"><input type="submit" value="注册"id="btn_sub"></td>
                       </tr>
                   </table>
               </form>
           </div>
        </div>
        <div class="rg_right">
            <p>已有账号<a href="#">立即登录</a></p>
        </div>
    </div>
</body>
</html>

JQuery实现表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style type="text/css">
        /*将所有标签默认的内外边距清除*/
        *{
            margin: 0px;
            padding: 0px;
            /*元素宽由width=content变为content+padding+border*/
            box-sizing: border-box;
        }
        html{
            height: 100%;
        }
        body{ /*背景图片 不重复铺设 居中*/
            background:url("img/rg_bg.jpg") no-repeat center ;
            background-size: 100% 100% ;
        }
        .rg_layout{  /*设置注册表布局框，背景颜色白色，分为三部分*/
            width: 900px;
            height: 550px;
            border: 8px solid #EEEEEE;
            background-color: white;
            /*--让div水平居中auto*/
            margin: auto;

           margin-top: 80px;

        }
        .rg_left{  /*白色注册框中左边部分*/
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }
        /*设置左部分p标签中文字属性*/
        .rg_left >p:first-child{ /*该类选择器下第一个p标签以及最后一个标签*/
            color:#FFD026;
            font-size: 20px;

        }
        .rg_left>p:last-child{
            color:#A6A6A6;
            font-size: 20px;

        }
        /*白色注册框中间部分*/
        .rg_center{
            /*border: 1px solid red;*/
            float: left;
            width: 540px;
        }
        /*白色注册框右边部分*/
        .rg_right{
            /*border: 1px solid red;*/
            float: right;
            margin: 15px;
        }
        /*白色注册框右边部分文字属性*/
        .rg_right>p:first-child{
            font-size: 15px;
        }
        .rg_right p a{
            color: pink;
        }
        .td_left{ /*设置注册表左列元素的属性文本右对齐以及宽高*/
            width: 100px;
            text-align: right;/*文本右对齐*/
            height: 45px;
        }
        .td_right{/*设置注册表右列左内边距使input组件与右列左边界有空间*/
            padding-left: 50px;
        }/*并集选择器*/
        #username,#password,#email,#company,#majory,#tel,#birthday{/*设置注册表右列input组件属性并让里面文字有左边距*/
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6; /*灰色*/
            border-radius: 5px; /*设置圆角*/
            padding-left: 10px; /*设置input组件内左边距*/

        }
        
        #btn_sub{   /*注册按钮属性设置*/
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026;/*消除边框(颜色与按钮背景颜色同)*/
        }
        .error{    /*用户名密码验证失败所显示的文字的属性*/
            color: red;
        }
        #td_sub{  /*设置注册按钮在该行中的位置，用内边距*/
            padding-left: 150px;

        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
		//校验手机号
		function checkPhoneNum(){
			var tel=$("input[name='tel']").val();
			if(tel==''){
            	$("span[id='s_tel']").html("手机不为空！").css("color", "red");
            	return false;
            }else if(/^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/.test(tel)==false){
            	$("span[id='s_tel']").html("手机不合法！").css("color", "red");
            	return false;
            }
            $("span[id='s_tel']").html("<img src='./img/对勾.jpg';width='23px'; height='23px'>");
			return true;
		}
       
        //校验专业表单项非空
        function checkMajory(){
        	//获取表单项值
        	var majory=$("input[name='majory']").val();
   			if(majory==''){
            	$("span[id='s_majory']").html("专业不为空！").css("color", "red");
            	return false;
            }
            $("span[id='s_majory']").html("<img src='./img/对勾.jpg';width='23px'; height='23px'>");
			return true;
        }
        

       //校验院校表单项非空
   		function checkCompany(){
   			var company=$("input[name='company']").val();
   			if(company==''){
            	$("span[id='s_company']").html("院校不为空！").css("color", "red");
            	return false;
            }
            $("span[id='s_company']").html("<img src='./img/对勾.jpg';width='23px'; height='23px'>");
			return true;
   		}
			
        //校验邮箱方法
        function checkEmail(){
        	//1.获取邮箱内容
        	var email=$("input[name='email']").val();
        	if(email==''){
            	$("span[id='s_email']").html("邮箱不为空！").css("color", "red");
            	return false;
            }else if(/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(email) == false){
            	$("span[id='s_email']").html("邮箱不合法！").css("color", "red");
				return false;
            }
            $("span[id='s_email']").html("<img src='./img/对勾.jpg';width='23px'; height='23px'>");
			return true;
        }  
        
        
        //校验密码方法
        function checkPassword(){
            //1.获取密码的值(文本输入框值)，通过name找value
            var password=$("input[name='password']").val();
            if(password==''){
            	$("span[id='s_password']").html("密码不为空！").css("color", "red");
            	return false;
            }else if(/^[a-zA-z]\w{5,}/.test(password) == false){
            	$("span[id='s_password']").html("密码不合法！").css("color", "red");
				return false;
            }
            $("span[id='s_password']").html("<img src='./img/对勾.jpg';width='23px'; height='23px'>");
			return true;
        }
        

        //校验用户名方法
        function checkUserName(){
            //1.获取用户名的值(文本输入框值),通过name找value
            var username=$("input[name='username']").val();
            if(username==''){
            	$("span[id='s_username']").html("用户名不为空！").css("color", "red");
            	return false;
            }else if(/^[a-zA-z]\w{5,}/.test(username) == false){
            	$("span[id='s_username']").html("用户名不合法！").css("color", "red");
				return false;
            }
            $("span[id='s_username']").html("<img src='./img/对勾.jpg';width='23px'; height='23px'>");
			return true;
		}
        
        //就绪事件，页面都加载完成后开始执行下面代码
        $(function(){
        	//给input表单项绑定离焦事件
        	$("input[name='username']").blur(function(){ 
					checkUserName();
			}); 
			$("input[name='password']").blur(function(){ 
					checkPassword();
			});
			$("input[name='email']").blur(function(){ 
					checkEmail();
			});
			$("input[name='company']").blur(function(){ 
					checkCompany();
			});
			$("input[name='majory']").blur(function(){ 
					checkMajory();
			});
		
			$("input[name='tel']").blur(function(){ 
					checkPhoneNum();
			});
			//给表单绑定提交事件，只有返回true表单才会提交
			$("#form").submit(function() {
					return checkUserName() && checkPassword() && checkEmail()() && checkCompany() && checkMajory() && checkPhoneNum();
			});
        })
        
    </script>
</head>
<body class="body">
    <div class="rg_layout">
        <div class="rg_left">
            <p >新用户注册</p>
            <p> USER REGISTER</p>
        </div>
        <div class="rg_center">
           <div class="rg_form">
               <!--定义表单form-->
               <form action="#" method="post" id="form">
                   <table >
                       <tr>
                           <td class="td_left"><label for="username">用户名</label></td>
                           <td class="td_right">
                               <input type="text" name="username" id="username" placeholder="请输入用户名">
                               <span id="s_username" class="error"></span>
                           </td>
                       </tr>
                       <tr>
                           <td class="td_left"><label for="password">密码</label></td>
                           <td class="td_right">
                               <input type="password" name="password" id="password" placeholder="请输入密码">
                               <span id="s_password"class="error"></span>
                           </td>
                       </tr>
                       <tr>
                           <td class="td_left"><label for="email">Email</label></td>
                           <td class="td_right">
                           		<input type="email" name="email" id="email" placeholder="请输入邮箱">
                           		<span id="s_email"class="error"></span>
                           </td>
                           
                       </tr>
                        <tr>
                           <td class="td_left"><label for="company">院校</label></td>
                           <td class="td_right">
                           		<input type="text" name="company" id="company" placeholder="请输入院校">
                           		<span id="s_company"class="error"></span>
                           </td>
                       </tr>
                       <tr>
                           <td class="td_left"><label for="majory">专业</label></td>
                           <td class="td_right">
                           		<input type="text" name="majory" id="majory" placeholder="请输入专业">
                           		<span id="s_majory" class="error"></span>
                           </td>
                       </tr>
                       <tr>
                           <td class="td_left"><label for="tel">手机号</label></td>
                           <td class="td_right">
                           		<input type="tel" name="tel" id="tel" placeholder="请输入手机号">
                           		<span id="s_tel"class="error"></span>
                           </td>
                       </tr>
                       <tr>
                           <td class="td_left"><label>性别</label></td>
                           <td class="td_right"><input type="radio" name="gender" value="male">男
                               <input type="radio" name="gender" value="female">女
                           </td>
                       </tr>
                       <tr>
                           <td class="td_left"><label for="birthday">出生日期</label></td>
                           <td class="td_right"><input type="date" name="birthday" id="birthday"></td>
                       </tr>
                       <tr>
                           <td class="td_left"><label>参赛语言</label></td>
                           <td class="td_right">
                           		<select name="language">
                           			<option value="C++">C++</option>
                           			<option value="Java">Java</option>
                           			<option value="JavaScript">JavaScript</option>
                           			<option value="Python">Python</option>
                           		</select>
                           </td>
                       </tr>
                       <tr>
                           <td class="td_left"><label for="agreement">协议</label></td>
                           <td class="td_right"><textarea rows="1">1. 参加全国竞赛的项目从省级竞赛获奖项目按规定名额择优推荐。2. 申报项目必须是从当年7月1日往前推不超过两年时间内完成的。</textarea></td>
                       </tr>
                           <td colspan="2" id="td_sub"><input type="submit" value="注册"id="btn_sub"></td>
                       </tr>
                   </table>
               </form>
           </div>
        </div>
        <div class="rg_right">
            <p>已有账号<a href="#">立即登录</a></p>
        </div>
    </div>
</body>
</html>