本文展示了如何使用HTML和JavaScript实现用户注册页面的表单验证，包括用户名、密码和确认密码的格式检查，以及动态时钟功能。此外，还提供了四则运算计算器的实现和学生信息列表的动态生成。这些示例涵盖了前端交互的基本元素，如正则表达式验证、事件监听和DOM操作。
1.制作如下界面，实现用户名、密码和确认密码的验证，并给与一定的提示消息
实现代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="" cellspacing="" cellpadding="">
<tr>
<td>账户：</td>
<td>
<input type="text" name="uname" id="uname" value="" onblur="checkUname()" />
</td>
<td><label id="msg1"></label></td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="text" name="pwd1" id="pwd1" value="" onblur="checkPwd(1)"/>
</td>
<td><label id="msg2"></label></td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input type="text" name="pwd2" id="pwd2" value="" onblur="checkEquals()"/>
</td>
<td><label id="msg3"></label></td>
</tr>
<tr>
<td>家庭住址：</td>
<td>
<select name="province" id="province" onchange="changeopt()">
<option value="请选择省份">--请选择省份--</option>
<option value="河南省">河南省</option>
<option value="四川省">四川省</option>
</select>
<select name="cities" id="cities">
<option value="请选择城市">--请选择城市--</option>
</select>
</tr>
<tr>
<td colspan="3" align="center">
<input type="button" id="btn" value="提交" />
</td>
</tr>
</table>
<div id="result">
</div>
<script type="text/javascript">
function checkUname() {
//用于验证用户名的正则表达式
var reg = /^[a-zA-Z_]{6,}$/
//获取文本框中的内容
var username = document.getElementById("uname").value
//利用text()函数进行格式验证
if (reg.test(username)) {
document.getElementById("msg1").innerHTML = "用户名格式正确"
return true
} else {
document.getElementById("msg1").innerHTML = "用户名格式不正确"
return false
}
}
function checkPwd(n) {
//验证密码和确认密码的格式：可以包含数字、字母、下划线，且长度至少为6位
var reg = /^[0-9a-zA-Z_]{6,}$/
//获取到密码和确认密码
var pwd1 = document.getElementById("pwd1").value
var pwd2 = document.getElementById("pwd2").value
if (n == 1) {
//对密码格式进行验证
if (reg.test(pwd1)) {
document.getElementById("msg2").innerHTML = "密码格式正确"
return true
} else {
document.getElementById("msg2").innerHTML = "密码格式不正确"
return false
}
} else {
//对确认密码进行格式验证
if (reg.test(pwd2)) {
document.getElementById("msg3").innerHTML = "确认密码格式正确"
return true
} else {
document.getElementById("msg3").innerHTML = "确认密码格式不正确"
return false
}
}
}
function checkEquals(){
//第一步需要验证确认密码格式是否正确
if(checkPwd(2)){
//第二步验证密码和确认密码是否一致
var pwd1=document.getElementById("pwd1").value
var pwd2=document.getElementById("pwd2").value
if(pwd1==pwd2){
document.getElementById("msg3").innerHTML="密码和确认密码一致"
return true
}else{
document.getElementById("msg3").innerHTML="密码和确认密码不一致"
return false
}
}else{
return false
}
}
//下拉列表
function changeopt(){
var cityList=new Array();
cityList['请选择省份']=['--请选择城市--'];
cityList['河南省']=['郑州','开封','洛阳','商丘','焦作'];
cityList['四川省']=['成都','绵阳','德阳','自贡','泸州'];
//先获取到选中项，也就是选中的省份的值
var province =document.getElementById("province").value
document.getElementById("cities").options.length=0
for(var i=0;i<cityList[province].length;i++){
console.log(cityList[province][i])
var opt = new Option(cityList[province][i],cityList[province][i])
document.getElementById("cities").options.add(opt)
}
}
//按钮提交
document.getElementById("btn").onclick=function (){
if(checkUname()&&checkPwd(1)&&checkEquals()){
alert("注册成功")
}else{
alert("注册失败")
}
}
</script>
</body>
</html>
2.在页面上实现一个显示当前时间的动态时钟
实现代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<span id="time">
现在是
</span>
<!-- 2. 在页面上实现一个显示当前时间的动态时钟-->
<script type="text/javascript">
setInterval(function sses() {
var date = new Date
//定义一个变量用来接受小时
var hours = date.getHours()
//定义一个变量用来接受分钟
var minutes = date.getMinutes()
//定义一个变量用来接受毫秒
var seconds = date.getSeconds()
hours = hours > 9 ? hours : "0" + hours
minutes = minutes > 9 ? minutes : "0" + minutes
seconds = seconds > 9 ? seconds : "0" + seconds
var result = "现在是"+hours + "时" + minutes + "分" + seconds + "秒"
//获取span标签的id
document.getElementById("time").innerHTML=result
},1000)
</script>
</body>
</html>
3.实现简易的四则运算器
实现代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 编写计算器，实现加、减、乘、除。 -->
<table border="0" cellspacing="" cellpadding="">
<tr>
<td>请输入第一个数:</td>
<td><input type="text" id="oner"></td>
</tr>
<tr>
<td>请输入第一个数:</td>
<td><input type="text" id="twor"></td>
</tr>
<tr>
<td align="right">运算符：</td>
<td>
<input type="button" value="+" onclick="sisns('+')" />
<input type="button" value="-" onclick="sisns('-')" />
<input type="button" value="*" onclick="sisns('*')" />
<input type="button" value="/" onclick="sisns('/')" />
</td>
</tr>
<tr>
<td>运算结果是:</td>
<td><input type="text" id="jg"></td>
</tr>
</table>
<script type="text/javascript">
function sisns(x) {
//获取第一个文本框的值
var oner = document.getElementById("oner").value
//获取第一个文本框的值
var twor = document.getElementById("twor").value
//判断获取到的是不是数字
if (isNaN(oner)) {
alert("你输入的第一个数不是数字，请重新输入")
return
}
if (isNaN(twor)) {
alert("你输入的第二个数不是数字，请重新输入")
return
}
var i = null
if(x=="+"){
i=parseFloat(oner)+parseFloat(twor)
}else if(x=="-"){
i=parseFloat(oner)-parseFloat(twor)
}else if(x=="*"){
i=parseFloat(oner)*parseFloat(twor)
}else if(x=="/"){
i=parseFloat(oner)/parseFloat(twor)
}
//获取按钮的值
document.getElementById("jg").value=i
}
</script>
</body>
</html>
4. 编写注册页面，使用正则表达式完成相关验证，可以使用alert弹出。
实现代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 4. 编写注册页面，使用正则表达式完成相关验证，可以使用alert弹出。-->
<table border="0" cellspacing="" cellpadding="">
<tr>
<td></td>
<td><a>欢迎注册**网站</a></td>
</tr>
<tr>
<td>姓名：</td>
<td><input type="text" name="" id="names" value="" placeholder="2-4个中文"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="" id="pwd" value="" placeholder="至少6位,只能字母数字下划线"/></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" name="" id="email" value="" placeholder="单域名邮箱"/></td>
</tr>
<tr>
<td>年龄：</td>
<td><input type="text" name="" id="age" value="" placeholder="整数"/></td>
</tr>
<tr>
<td></td>
<td><input type="button" name="" id="checkyz" value="验证信息" /></td>
</tr>
</table>
<script type="text/javascript">
document.getElementById("checkyz").onclick=function(){
var names=document.getElementById("names").value
var checkNames=/^[\u4e00-\u9fa5]{2,4}$/;
var isname=checkNames.test(names)
var pwd=document.getElementById("pwd").value
var checkPwd=/^[0-9a-zA-Z_]{6,}$/
var isPwd=checkPwd.test(pwd)
var email=document.getElementById("email").value
var cheakEmail=/^[0-9a-zA-Z_]+@[0-9a-zA-Z]+[\.]{1}[0-9a-zA-Z_]+$/
var isEmail=cheakEmail.test(email)
var age=document.getElementById("age").value
var checkAge=/^[0-9]+$/
var isAge=checkAge.test(age)
if(isname){
if(isPwd){
if(isEmail){
if(isAge==false){
alert("年龄只能是整数")
}else{
alert("验证成功")
}
}else{
alert("请输入正确的邮箱格式")
}
}else{
alert("密码格式不正确，请输入至少6位且只能是字母数字下划线")
}
}else{
alert("姓名格式不正确，请输入2-4位中文")
}
}
</script>
</body>
</html>
5.将一组数据放入列表中
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="" cellspacing="" cellpadding="">
<thead>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
var data = [{
stuid: 1001,
stuname: "张三",
stusex: "男"
}, {
stuid: 1002,
stuname: "李四",
stusex: "男"
}, {
stuid: 1003,
stuname: "小红",
stusex: "女"
}]
for(var i=0;i<data.length;i++){
//1.获取数组中的数据
var stuid= data[i].stuid
var stuname=data[i].stuname
var stusex=data[i].stusex
//2.创建一个td标签
var stu_id=document.createElement("td")
var stu_name=document.createElement("td")
var stu_sex=document.createElement("td")
//3.将学号、姓名、性别放到td标签内
stu_id.innerHTML=stuid
stu_name.innerHTML=stuname
stu_sex.innerHTML=stusex
//4.创建一个tr标签
var tr=document.createElement("tr")
//将td标签放入tr标签中
tr.appendChild(stu_id)
tr.appendChild(stu_name)
tr.appendChild(stu_sex)
//5.将tr放入tbody里面
document.querySelector("tbody").appendChild(tr)
}
</script>
</body>
</html>
扫一扫
392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
