注册用户（js核验用户输入）

偏执的太偏执、 2023-09-29 10:28 10阅读 0赞

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>注册</title>
            <link rel="stylesheet" type="text/css" href="css/common.css">
            <link rel="stylesheet" href="css/register.css">
    		
    		<script src="js/jquery-3.3.1.js"></script>
    		<script>
    			/*
                表单校验：
                    1.用户名：单词字符，长度8到20位
                    2.密码：单词字符，长度8到20位
                    3.email：邮件格式
                    4.姓名：非空
                    5.手机号：手机号格式
                    6.出生日期：非空
                    7.验证码：非空
             */
    			//核验用户名
    			function checkUsername(){
        
    				var username = $("#username").val();
    				var reg_username=/^\w{
        8,20}$/;
    				var flag = reg_username.test(username);
    				if (flag){
        
    					$("#username").css("border","");
    
    				}else {
        
    					$("#username").css("border","1px solid red");
    				}
    				return flag;
    			}
    			//核验密码
    			function checkPassword(){
        
    				var password = $("#password").val();
    				var reg_password=/^\w{
        8,20}$/;
    				var flag = reg_password.test(password);
    				if (flag){
        
    					$("#password").css("border","");
    
    				}else {
        
    					$("#password").css("border","1px solid red");
    				}
    				return flag;
    			}
    			//核验邮箱
    			function checkEmail() {
        
    				//itcast@163.com
    				var email = $("#email").val();
    				var reg_email = /^\w+@\w+\.\w+$/;
    				var flag = reg_email.test(email);
    				if (flag) {
        
    					$("#email").css("border", "");
    
    				} else {
        
    					$("#email").css("border", "1px solid red");
    
    				}
    				return flag;
    			}
    			//核验姓名
    			function checkName() {
        
    				var name = $("#name").val();
    				var reg_name=/^\S+$/;
    				var flag = reg_name.test(name);
    				if (flag) {
        
    					$("#name").css("border", "");
    				} else {
        
    					$("#name").css("border", "1px solid red");
    
    				}
    				return flag;
    			}
    
    			//核验手机号
    			function checkTelephone() {
        
    				var telephone = $("#telephone").val();
    				var reg_telephone=/^0?(13|14|15|17|18)[0-9]{
        9}$/;
    				var flag = reg_telephone.test(telephone);
    				if (flag) {
        
    					$("#telephone").css("border", "");
    				} else {
        
    					$("#telephone").css("border", "1px solid red");
    				}
    				return flag;
    			}
    			//核验生日
    			function checkBirthday() {
        
    				var birthday = $("#birthday").val();
    				var reg_birthday=/^\S+$/;
    				var flag = reg_birthday.test(birthday);
    				if (flag) {
        
    					$("#birthday").css("border", "");
    				} else {
        
    					$("#birthday").css("border", "1px solid red");
    
    				}
    				return flag;
    			}
    			//核验验证码
    			function checkCheck() {
        
    				var check = $("#check").val();
    				var reg_check=/^\S+$/;
    				var flag = reg_check.test(check);
    				if (flag) {
        
    					$("#check").css("border", "");
    				} else {
        
    					$("#check").css("border", "1px solid red");
    
    				}
    				return flag;
    			}
    			$(function (){
        
    				//失去焦点
    				$("#username").blur(checkUsername);
    				$("#password").blur(checkPassword);
    				$("#email").blur(checkEmail);
    				$("#name").blur(checkName);
    				$("#telephone").blur(checkTelephone)
    				$("#birthday").blur(checkBirthday)
    				$("#check").blur(checkCheck)
    
    				$("#registerForm").submit(function (){
        
    					if (checkUsername()&&checkPassword()&&checkEmail()&&checkName()&&checkTelephone()&&checkBirthday()&&checkCheck()){
        
    						$.post("registUserServlet",$(this).serialize(),function (data){
        
    							if (data.flag){
        
    								//注册成功跳转页面
    								location.href="register_ok.html";
    
    							}else {
        
    								$("#errorMsg").html(data.errorMsg);
    
    							}
    
    						})
    
    					}
    					return false;
    				});
    			});
    		</script>
        </head>
    	<body>
    	
    	<div id="header"></div>
            
        	<div class="rg_layout">
        		<div class="rg_form clearfix">
        			<div class="rg_form_left">
        				<p>新用户注册</p>
        				<p>USER REGISTER</p>
        			</div>
        			<div class="rg_form_center">
    					<div id="errorMsg" style="text-align: center ;color: red"></div>
    					
    					
        				<form id="registerForm" action="user">
    						
    						<input type="hidden" name="action" value="register">
        					<table style="margin-top: 25px;">
        						<tr>
        							<td class="td_left">
        								<label for="username">用户名</label>
        							</td>
        							<td class="td_right">
        								<input type="text" id="username" name="username" placeholder="请输入账号">
        							</td>
        						</tr>
        						<tr>
        							<td class="td_left">
        								<label for="password">密码</label>
        							</td>
        							<td class="td_right">
        								<input type="text" id="password" name="password" placeholder="请输入密码">
        							</td>
        						</tr>
        						<tr>
        							<td class="td_left">
        								<label for="email">Email</label>
        							</td>
        							<td class="td_right">
        								<input type="text" id="email" name="email" placeholder="请输入Email">
        							</td>
        						</tr>
        						<tr>
        							<td class="td_left">
        								<label for="name">姓名</label>
        							</td>
        							<td class="td_right">
        								<input type="text" id="name" name="name" placeholder="请输入真实姓名">
        							</td>
        						</tr>
        						<tr>
        							<td class="td_left">
        								<label for="telephone">手机号</label>
        							</td>
        							<td class="td_right">
        								<input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">
        							</td>
        						</tr>
        						<tr>
        							<td class="td_left">
        								<label for="sex">性别</label>
        							</td>
        							<td class="td_right gender">
        								<input type="radio" id="sex" name="sex" value="男" checked> 男
        								<input type="radio" name="sex" value="女"> 女
        							</td>
        						</tr>
        						<tr>
        							<td class="td_left">
        								<label for="birthday">出生日期</label>
        							</td>
        							<td class="td_right">
        								<input type="date" id="birthday" name="birthday" placeholder="年/月/日">
        							</td>
        						</tr>
        						<tr>
        							<td class="td_left">
        								<label for="check">验证码</label>
        							</td>
        							<td class="td_right check">
        								<input type="text" id="check" name="check" class="check">
        								<img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)">
    									<script type="text/javascript">
    										//图片点击事件
    										function changeCheckCode(img) {
        
    											img.src="checkCode?"+new Date().getTime();
                                            }
    									</script>
        							</td>
        						</tr>
        						<tr>
        							<td class="td_left"> 
        							</td>
        							<td class="td_right check"> 
        								<input type="submit" class="submit" value="注册">
    									<span id="msg" style="color: red;"></span>
        							</td>
        						</tr>
        					</table>
        				</form>
        			</div>
        			<div class="rg_form_right">
        				<p>
        					已有账号？
        					<a href="#">立即登录</a>
        				</p>
        			</div>
        		</div>
        	</div>
            
        	<div id="footer"></div>
    		
    		<script type="text/javascript" src="js/include.js"></script>
        	
        </body>
    </html>