正则表达式

Major_xx
已于 2023-08-03 10:00:36 修改
阅读量67
点赞数
分类专栏： Java 文章标签：正则表达式
于 2022-04-14 20:21:57 首次发布
本文链接：https://blog.csdn.net/qq_41428418/article/details/124180699
版权
Java 专栏收录该内容
21 篇文章 1 订阅
订阅专栏
<!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">
		<!--导入jquery-->
		<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 (){
					return checkUsername()&&checkPassword()&&checkEmail()&&checkName()&&checkTelephone()&&checkBirthday()&&checkCheck();
				})
			});
		</script>
    </head>
	<body>
	<!--引入头部-->
	<div id="header"></div>
        <!-- 头部 end -->
    	<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">
					
					<!--注册表单-->
    				<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>
		<!--导入布局js，共享header和footer-->
		<script type="text/javascript" src="js/include.js"></script>
    	
    </body>
</html>
Major_xx
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
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
复制链接

扫一扫
专栏目录