文章目录 需求代码结构和资源引入代码实现界面示例
制作一个大会的宣传网站以供用户自行注册报名。要求自行定义表单项中的数据格式并基于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> 界面示例上一篇：诚招全国POS代理