需求
制作一个大会的宣传网站以供用户自行注册报名。要求自行定义表单项中的数据格式并基于jQuery实现表单验证。
代码结构和资源引入
- 这里需要基于jQuery实现表单验证,所以要引入js文件
<script type="application/javascript" src="js/jquery-1.11.1.js"></script>
代码实现
- index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>2021程序创新大会</title>
<script type="application/javascript" src="js/jquery-1.11.1.js"></script>
<script>
function isUserName() {
var val = $("input[name='userName']").val();
if(val == "") {
$("span[id='nameMsg']").html("用户名不能为空").css("color", "red");
return false;
} else if(/^[a-zA-Z]\w{5,}/.test(val) == false) {
$("span[id='nameMsg']").html("用户名必须以字母开头,至少五位数字结尾").css("color", "red");
return false;
}
$("span[id='nameMsg']").html("用户名可用").css("color", "green");
return true;
}
function isPwd1() {
var pwd = $("input[name='password1']").val();
if(pwd == "") {
$("span[id='pwdMsg1']").html("密码不能为空").css("color", "red");
return false;
} else if(/\d+[a-zA-Z]+/.test(pwd) == false) {
$("span[id='pwdMsg1']").html("密码必须包含数字和字母!").css("color", "red");
return false;
} else if(pwd.length < 6) {
$("span[id='pwdMsg1']").html("密码长度不小于6").css("color", "red");
return false;
}
$("span[id='pwdMsg1']").html("密码可用").css("color", "green");
return true;
}
function isPwd2() {
if($("input[id='password1']").val() != $("input[id='password2']").val()) {
$("span[id='pwdMsg2']").html("两次输入的密码不一致").css("color", "red");
return false;
}
$("span[id='pwdMsg2']").html("密码一致!").css("color", "green");
return true;
}
function isGender() {
var val = $("select[id='gender']").val();
if(val == -1) {
alert("请选择性别!");
return false;
}
return true;
}
//页面加载事件
$(function() {
$("input[name='userName']").blur(function() {
isUserName();
});
$("input[id='password1']").blur(function() {
isPwd1();
});
$("input[id='password2']").blur(function() {
isPwd2()
});
$("#myForm").submit(function() {
return isUserName() && isPwd1() && isPwd2();
});
});
</script>
</head>
<body>
<form id="myForm" action="registerSuccess.html" method="get">
用户名:<input type="text" id="userName" name="userName" placeholder="請輸入用戶名" />
<span id="nameMsg">用户名必须以字母开头,至少五位数字结尾</span><br/> 密码:
<input type="password" id="password1" placeholder="請輸入密码" />
<span id="pwdMsg1">密码长度至少6位,且必须包含数字、字母</span><br /> 确认密码:
<input type="password" id="password2" placeholder="请输入密码" />
<span id="pwdMsg2">确认密码一致</span><br />
<!--性别:<input type="radio" id="gender" name="gender" value="1"/>男
<input type="radio" name="gender" value="-1"/>女<br />-->
性别:
<select id="gender">
<option value="-1">选择性别</option>
<option value="1">男</option>
<option value="0">女</option>
</select><br /> 身份证号:
<input type="text" name="idCard" placeholder="请输入身份证号" /><br /> 爱好:
<input type="checkbox" name="hobby" value="swim" /> 游泳
<input type="checkbox" name="hobby" value="basketball" />篮球
<input type="checkbox" name="hobby" value="music" />音乐<br /> 头像:
<input type="file" name="headImg" /><br /> 出生日期:
<input type="datetime" name="birthday" /><br /> 学历:
<select name="学历">
<option value="student">本科</option>
<option value="master"> 硕士研究生</option>
<option value="doctor">博士研究生</option><br/>
</select><br /> 声明:
<textarea rows="20" cols="30" readonly="readonly">本此大会相关解释权归会议组委会所有!1.所有参与者需遵守相关规章制度;2.按时缴纳费用,凭借核酸检测证明入场。
</textarea><br />
<button type="submit">注册</button>
<input type="reset" value="重置">
<p>
<a href="http://www.baidu.com" target="content">大会流程</a>
</p>
<iframe name="content" src="sub/notes.html"></iframe>
</form>
</body>
</html>
- 注册成功页面registerSuccess.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册成功</title>
</head>
<body>
恭喜你,注册成功!
</body>
</html>