标签：用户名 功能分析 表单 flag 旅游网 var border reg css
综合案例-黑马旅游网注册功能分析
图解
综合案例-黑马旅游网注册功能_表单校验
表单校验功能
- 用户名：单词字符 长度8到20位
- 密码：单词字符 长度8到20位
- email：邮件格式
- 姓名：非空
- 手机号：手机号格式
- 出生日期：非空
- 验证码：非空
HTML代码
<!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>
//校验用户名
function checkUsername() {
//1.获取用户名值
var username = $("#username").val();
//2.定义正则
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() {
//1.获取密码值
var password = $("#password").val();
//2.定义正则
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() {
//1.获取邮箱值
var email = $("#email").val();
//2.定义正则
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(){
//1.获取姓名值
var name = $("#name").val();
//2.定义正则
var reg_name = /^\w+$/;
//判断 给出提示信息
var flag = reg_name.test(name);
if (flag) {
//用户名合法
$("#name").css("border", "")
} else {
//用户名违法
$("#name").css("border", "1px solid red");
}
return flag;
}
//校验手机号
function checktelephone(){
//1.获取手机号值
var telephone = $("#telephone").val();
//2.定义正则
var reg_telephone = /^\w+(?:(?!0)\d*|0)?$/;
//判断 给出提示信息
var flag = reg_telephone.test(telephone);
if (flag) {
//用户名合法
$("#telephone").css("border", "")
} else {
//用户名违法
$("#telephone").css("border", "1px solid red");
}
return flag;
}
//校验出生日期
function checkbirthday(){
//1.获取出生日期值
var birthday = $("#birthday").val();
//2.定义正则
var reg_birthday = /^\d{4}-\d{2}-\d{2}$/;
//判断 给出提示信息
var flag = reg_birthday.test(birthday);
if (flag) {
//用户名合法
$("#birthday").css("border", "")
} else {
//用户名违法
$("#birthday").css("border", "1px solid red");
}
return flag;
}
//校验验证码
function check(){
//1.获取验证码值
var check = $("#check").val();
//2.定义正则
var reg_check = /^\w+$/;
//判断 给出提示信息
var flag = reg_check.test(check);
if (flag) {
//用户名合法
$("#check").css("border", "")
} else {
//用户名违法
$("#check").css("border", "1px solid red");
}
return flag;
}
$(function () {
//当表单提交时 调用所有的校验方法
$("#registerForm").submit(function () {
return checkUsername() && checkPassword() && checkEmail()
&& checkname() && checktelephone() && checkbirthday() && check();
//如果这个方法没有返回值 或者返回位true 则表单提交 如果返回为false 则表单不提交
});
//当某一个组件失去焦点是 调用对应的校验方法
$("#username").blur(checkUsername);
$("#password").blur(checkPassword);
$("#email").blur(checkEmail);
$("#name").blur(checkname);
$("#telephone").blur(checktelephone);
$("#birthday").blur(checkbirthday);
$("#check").blur(check);
})
</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="login.html">立即登录</a>
</p>
</div>
</div>
</div>
<!--引入尾部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</body>
</html>
运行结果
标签：用户名,功能分析,表单,flag,旅游网,var,border,reg,css 来源： https://www.cnblogs.com/aimz01/p/16619473.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。