项目实训——第一个页面

注册页面 费尽力气才来到了工作的真正开始——制作第一个页面。我们决定先把注册页面做出来。

注册页面

这个页面说白了就是一个表单。

<h1>o f f e r c o m i n g</h1> <div class="log"> <div class="content2"> <h2>用户注册</h2> <form name="form" class="layui-form" id="form"> <div> <label class="label label1">账号:</label> <input type="text" id="username" name="username" class="text" placeholder="16位之内" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '16位之内';} " ></div> <div> <label class="label label1">密码</label> <input type="password" id="psw" name="password" placeholder="8位之内，一定要含有字母和数字" onfocus="this.value = ''" ></div> <div> <label class="label" style="margin-right: 5%" name="sex">性别</label> <label class="gender"><input name="sex" style="color:#4d2eb3" title="男" type="radio" checked="" value="男"></label> <label class="gender"><input name="sex" title="女" type="radio" value="女"></label> <label class="gender"><input name="sex" title="秘密" type="radio" value=""></label> </div> <!--优化成弹出一个日期框--> <div> <label class="label" style="position: absolute;left: 28%;">生日</label> <input type="text" class="layui-input text" id="age" name="age" style="position:relative;left:26.5%;" placeholder="yyyy-MM-dd"> </div> <div> <label class="label label1 layui-form-label" style="margin-left: 10%">身份</label> <div class="layui-input-block" style="width: 60%;margin-top: 4%;margin-left: 26.5%"> <select name="status" lay-verify="required" style="width: 100%"> <option value="">请选择</option> <option value="3" selected="">学生(求职者)</option> <option value="1">导师</option> <option value="2">校友(在职者)</option> </select> </div> </div> <div> <label class="label " style="position: absolute;left: 27.5%;">毕业年份</label> <input class="layui-input text" type="text" id="graduationdate" name="graduationdate" placeholder="yyyy" style="margin-left: 26.5%"> </div> <div> <label class="label layui-form-label" style="margin-left: 10%">专业</label> <input type="text" id="major" name="major" class="text" placeholder="你的专业" > </div> <div> <label class="label label1">联系方式</label> <input type="text" class="text" id="contactline" name="contactline" placeholder="邮箱" onfocus="this.value = ''"> </div> <div> <label class="label label1">标签</label> <textarea name="keywords" class="text" id="keyword" placeholder="输入一些关于你的短语吧！比如感兴趣的专业、岗位或公司，又或者是掌握的语言，精通的领域等。每个短语之间要用逗号(中文状态)隔开"></textarea> </div> <button class="register" id="submitBtn" type="button" style="height: 45px">注册</button> <!--<input type="button" class="register" id="submitBtn" value="注册">--> </form> </div> </div>

和其他表单页面大同小异。重要的是JavaScript，它要用来判断表单内输入的内容是否符合规范。

$(function(){ $("#submit").on('click',function() { if(document.getElementById('userid').value===''){ alert('账号不得为空！'); return false; } if(document.getElementById('userid').value.length>16){ alert('账号长度不得超过16位！'); return false; } if(document.getElementById('psw').value===''){ alert('密码不得为空！'); return false; } if(document.getElementById('psw').value.length>8){ alert('密码需为8位以下！'); return false; } if(document.getElementById('age').value===''){ alert('年龄不得为空！'); return false; } if(document.getElementById('status').value===''){ alert('身份不得为空！'); return false; } if(document.getElementById('graduationdate').value===''){ alert('毕业年份不得为空！'); return false; } if(document.getElementById('graduationdate').value.length!==4){ alert('毕业年份必须为4位'); return false; } if(document.getElementById('major').value===''){ alert('专业不得为空！'); return false; } if(document.getElementById('contactline').value===''){ alert('联系方式不得为空！'); return false; } //正则表达式 //当联系方式为电话号码时 var regNumber = /^\d+$/;//全数字 //当联系方式为邮箱时 var regString = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;//是否含有”@“和”.“ //当联系方式为全数字时，判断是否为11位 if(regNumber.test(document.getElementById('contactline').value)&&document.getElementById('contactline').value.length!==11){ alert('电话号码需为十一位'); return false; } //当联系方式不为全数字，判断是否符合邮箱格式 if(!regNumber.test(document.getElementById('contactline').value)&&!regString.test(document.getElementById('contactline').value)){ alert('您输入的邮箱格式不对'); return false; } if(document.getElementById('keyword').value===''){ alert('标签不得为空！'); return false; } var userid = $("#userid").val(); var pwd = $("#psw").val(); var sex = $('input:radio:checked').val() var age = $("#age").val(); var status = $('#status').find('option:selected') .val();; var graduationdate = $("#graduationdate").val(); var major = $("#major").val(); var contactLine = $("#contactline").val(); var keyword = $("#contactline").val(); console.log(userid); $.ajax() }) })

实现效果如图：