《专业二》第十八单元日考技能试题

最新推荐文章于 2024-07-16 20:50:21 发布

优秀的磊少

最新推荐文章于 2024-07-16 20:50:21 发布

阅读量64

点赞数

文章标签： html html5 css

本文链接：https://blog.csdn.net/m0_53762175/article/details/119927696

版权

（图一）

前端基础考察（100分）

创建一个类似上图的表单（图仅供参考），表单元素要做到全面（5分）
使用CSS调整样式，做到美观整洁，符合产品思维（5分）
失焦正则验证：名字不得为空，2-3位汉字（10分）
失焦正则验证：姓氏必须为1位纯汉字（10分）
失焦正则验证：用户名不得为空，5-10位字符，不得以数字和下划线开头（10分）
失焦正则验证：密码长度在6位以上，且不可纯数字、纯字母、不能有特殊符号，必须是大写字母、小写字母、数字、下滑线的混合（10分）
失焦正则验证：密码和确认密码必须一致（10分）
失焦正则验证：邮箱必须是合格邮箱，格式为：XXXXX@XXX.com（（10分）
增加一个手机号的文本框，失焦验证手机号必须为11位纯数字，必须是符合联通、电信、移动规则的手机号码（10分）
增加一组复选框，为爱好，至少4个选项，默认选中前两个（5分）
提交表单时要验证爱好至少选择两项，否则不可提交表单（5分）
提交表单时要对整个表单的规则进行检查，有不合格的表单不可提交（5分）
所有的不合格内容都要以红色字体显示在对应的表单元素后面（5分）

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title></title>
	<!-- CSS样式 -->
	<style type="text/css">

	*{
	padding: 0;margin: 0;
	}

	.big{
	width: 500px;height: auto;
	border: 2px solid black;
	margin: 20px auto;
	}

	tr{
	height: 40px;
	}

	tr td:nth-child(1){
	width: 70px;
	text-align: right;
	}

	</style>
	</head>
	<body>
	<!-- 主体 -->
	<div class="big">
	<!-- 表单提交到百度页面 -->
	<form action="http://baidu.com" id="sub">
	<table border="1">
	<tr>
	<td>姓名</td>
	<td><input type="text" id="nameAll" /></td>
	</tr>
	<tr>
	<td>姓氏</td>
	<td><input type="text" id="nam" /></td>
	</tr>
	<tr>
	<td>用户名</td>
	<td><input type="text" id="nameUser" /></td>
	</tr>
	<tr>
	<td>密码</td>
	<td><input type="password" id="pas" /></td>
	</tr>
	<tr>
	<td>验证密码</td>
	<td><input type="password" id="rePas" /></td>
	</tr>
	<tr>
	<td>Email</td>
	<td><input type="email" id="eml" /></td>
	</tr>
	<tr>
	<td>手机号</td>
	<td><input type="tel" id="tel" /></td>
	</tr>
	<tr>
	<td>爱好</td>
	<td class="two">
	<input type="checkbox" checked/>羽毛球
	<input type="checkbox" checked/>乒乓球
	<input type="checkbox"/>台球
	<input type="checkbox"/>篮球
	<input type="checkbox"/>足球
	</td>
	</tr>
	<tr>
	<td colspan="2" style="text-align: center;"><input type="submit" value="提交"/></td>
	</tr>
	</table>
	</form>
	</div>
	</body>
	</html>
	<!-- 引入CDN JQuery -->
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
	// 设置标记变量
	var f1=false,f2=false,f3=false,f4=false,f5=false,f6=false,f7=false,f8=false;
	// 名字，失焦事件
	$('#nameAll').blur(function(){
	var a=$(this).val()//获取value值
	var reg=/^[\u4E00-\u9FA5]{2,3}$/ //正则表达式
	if(!reg.test(a)){//用正则表达式检验
	$(this).next().remove()//清除上一次的文本提示
	$(this).after("<font color=#f00>2-3位汉字</font>")//在文本框后追加文本提示,错误
	f1=false//改变标记变量值
	return false//结束函数执行
	}
	$(this).next().remove()//清除上一次的文本提示
	$(this).after("<font color=#f00>验证通过</font>")//在文本框后追加文本提示，正确
	f1=true//改变标记变量值
	})
	// 姓氏
	$('#nam').blur(function(){
	var a=$(this).val()
	var reg=/^[\u4e00-\u9fa5]$/
	if(!reg.test(a)){
	$(this).next().remove()
	$(this).after("<font color=#f00>1位纯汉字</font>")
	f2=false
	return false
	}
	$(this).next().remove()
	$(this).after("<font color=#f00>验证通过</font>")
	f2=true
	})
	// 用户名
	$('#nameUser').blur(function(){
	var a=$(this).val()
	var reg=/^[a-zA-Z]\w{4,9}$/
	if(!reg.test(a)){
	$(this).next().remove()
	$(this).after("<font color=#f00>5-10位字符，不得以数字和下划线开头</font>")
	f3=false
	return false
	}
	$(this).next().remove()
	$(this).after("<font color=#f00>验证通过</font>")
	f3=true
	})
	// 密码
	$('#pas').blur(function(){
	var a=$(this).val()
	var reg=/^\w{6,}$/
	if(!reg.test(a)){
	$(this).next().remove()
	$(this).after("<font color=#f00>6位以上，不可纯数字纯字母，不能有特殊符号，必须是大写字母小写字母数字下滑线的混合</font>")
	f4=false
	return false
	}
	$(this).next().remove()
	$(this).after("<font color=#f00>验证通过</font>")
	f4=true
	})
	// 验证密码
	$('#rePas').blur(function(){
	var a=$(this).val()//获取密码值
	var b=$('#pas').val()//获取确认密码值
	if(a!=b){//密码值和确认密码值比较
	$(this).next().remove()
	$(this).after("<font color=#f00>密码和确认密码必须一致</font>")
	f5=false
	return false
	}
	$(this).next().remove()
	$(this).after("<font color=#f00>验证通过</font>")
	f5=true
	})
	// 邮箱
	$('#eml').blur(function(){
	var a=$(this).val()
	var reg=/^\w+@\w+\.com$/
	if(!reg.test(a)){
	$(this).next().remove()
	$(this).after("<font color=#f00>邮箱必须是合格邮箱，格式为：XXXXX@XXX.com</font>")
	f6=false
	return false
	}
	$(this).next().remove()
	$(this).after("<font color=#f00>验证通过</font>")
	f6=true
	})
	// 手机号
	$('#tel').blur(function(){
	var a=$(this).val()
	var reg=/^1[3\|5\|7\|8]\d{9}$/
	if(!reg.test(a)){
	$(this).next().remove()
	$(this).after("<font color=#f00>手机号必须为11位纯数字，必须是符合联通、电信、移动规则的手机号码</font>")
	f7=false
	return false
	}
	$(this).next().remove()
	$(this).after("<font color=#f00>验证通过</font>")
	f7=true
	})
	// 爱好
	// 绑定表单提交提交事件
	$('#sub').submit(function(){
	if(f1==true&&f2==true&&f3==true&&f4==true&&f5==true&&f6==true&&f7==true&&$('.two :checked').length>=2){//如果以上验证都通过
	return true//提交成功
	}
	if($('.two :checked').length<2){
	$('.two font').remove()
	$('.two').append("<font color=#f00>爱好至少选择两项，否则不可提交表单</font>")//爱好验证失败
	return false//提交成功
	}
	$('.two font').remove()
	$('.two :checked').parents('td').append("<font color=#f00>验证正确</font>")//爱好验证成功
	return false//提交失败
	})
	</script>

	<!-- 没有用手动触发函数，所以要自己真正的手动触发失焦，得到提示信息而跳转页面 -->

优秀的磊少

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《专业二》第十八单元日考技能试题

（图一）前端基础考察（100分）创建一个类似上图的表单（图仅供参考），表单元素要做到全面（5分）使用CSS调整样式，做到美观整洁，符合产品思维（5分）失焦正则验证：名字不得为空，2-3位汉字（10分）失焦正则验证：姓氏必须为1位纯汉字（10分）失焦正则验证：用户名不得为空，5-10位字符，不得以数字和下划线开头（10分）失焦正则验证：密码长度在6位以上，且不可纯数字、纯字母、不能有特殊符号，必须是大写字母、小写字母、数字、下滑线的混合（10分）失焦正则验证：密码和...
复制链接

扫一扫