项目实训——第一个页面

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

注册页面

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

<h1>o f f e r c o m i n gh1>
<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>

	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()
    })
})

实现效果如图：