注册页面

最新推荐文章于 2022-12-02 11:18:50 发布

lemonmr

最新推荐文章于 2022-12-02 11:18:50 发布

阅读量395

点赞数

本文链接：https://blog.csdn.net/lemonmr/article/details/102887453

版权

	<script>
		/*
			表单校验：
				1.用户名：单词字符，长度8到20位
				2.密码：单词字符，长度8到20位
				3.email：邮件格式
				4.姓名：非空
				5.手机号：手机号格式
				6.出生日期：非空
				7.验证码：非空
		 */

		//校验用户名
		//单词字符，长度8到20位
		function checkUsername() {
            //1.获取用户名值
			var username = $("#username").val();
			//2.定义正则
			var reg_username = /^\w{8,20}$/;
			
			//3.判断，给出提示信息
		    var flag = reg_username.test(username);
		    if(flag){
		        //用户名合法
                $("#username").css("border","");
			}else{
		        //用户名非法,加一个红色边框
				$("#username").css("border","1px solid red");
			}
		    
            return flag;
        }

        //校验密码
        function checkPassword() {
            //1.获取密码值
            var password = $("#password").val();
            //2.定义正则
            var reg_password = /^\w{8,20}$/;

            //3.判断，给出提示信息
            var flag = reg_password.test(password);
            if(flag){
                //密码合法
                $("#password").css("border","");
            }else{
                //密码非法,加一个红色边框
                $("#password").css("border","1px solid red");
            }

            return flag;
        }

        //校验邮箱
		function checkEmail(){
		    //1.获取邮箱
			var email = $("#email").val();
			//2.定义正则		itcast@163.com
			var reg_email = /^\w+@\w+\.\w+$/;

			//3.判断
			var flag = reg_email.test(email);
			if(flag){
                $("#email").css("border","");
			}else{
                $("#email").css("border","1px solid red");
			}

			return flag;
		}

		$(function () {
            //当表单提交时，调用所有的校验方法
			$("#registerForm").submit(function(){
				//1.发送数据到服务器
				if(checkUsername() && checkPassword() && checkEmail()){
				    //校验通过,发送ajax请求，提交表单的数据   username=zhangsan&password=123

					$.post("user/regist",$(this).serialize(),function(data){
						//处理服务器响应的数据  data  {flag:true,errorMsg:"注册失败"}

						if(data.flag){
						    //注册成功，跳转成功页面
							location.href="register_ok.html";
						}else{
						    //注册失败,给errorMsg添加提示信息
							$("#errorMsg").html(data.errorMsg);

						}
					});

				}
				//2.不让页面跳转
                return false;
                //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
			});

            //当某一个组件失去焦点是，调用对应的校验方法
			$("#username").blur(checkUsername);
            $("#password").blur(checkPassword);
            $("#email").blur(checkEmail);


        });


	</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">
				<div id="errorMsg" style="color:red;text-align: center"></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>
	<!--导入布局js，共享header和footer-->
	<script type="text/javascript" src="js/include.js"></script>
	
</body>

lemonmr

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
注册页面

注册 <script> /* 表单校验： 1.用户名：单词字符，长度8到20位 2.密码：单词字符，长度8到20位 3.email：邮件格式 4.姓名：非空 5.手机号：手机号格式 6.出生日期：非空 7.验证码：非空 ...
复制链接

扫一扫