注册表格提交项目

需求

html代码

    <form>
        <table id="table">
            <tr>
                <td>昵称:</td>
                <td><input type="text" placeholder="请输入" id="nc"></td>
                <td><div id="box1"></div></td>
            </tr>
            <tr>
                <td>姓名:</td>
                <td><input type="text" placeholder="请输入"id="xm"></td>
                <td><div id="box2"></div></td>
            </tr>
            <tr>
                <td>QQ:</td>
                <td><input type="text" placeholder="请输入"id="qq"></td>
                <td><div id="box3"></div></td>
            </tr>
            <tr>
                <td>手机号:</td>
                <td><input type="text" placeholder="请输入"id="sj"></td>
                <td><div id="box4"></div></td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td><input type="text" placeholder="请输入"id="yx"></td>
                <td><div id="box5"></div></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="text" placeholder="请输入"id="mm"></td>
                <td><div id="box6"></div></td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="text" placeholder="请输入"id="qrmm"></td>
                <td><div id="box7"></div></td>
            </tr>
            <tr>
                <td><input type="button" value="提交" id="btn1"></td>
                <td><input type="button" value="重置" id="btn2"></td>
            </tr>
        </table>
    </form>

css代码

tr div{
    color: red;
    font-size: 10px;
}

JavaScript代码

var nc = document.getElementById('nc')
var xm = document.getElementById('xm')
var qq = document.getElementById('qq')
var sj = document.getElementById('sj')
var yx = document.getElementById('yx')
var mm = document.getElementById('mm')
var qrmm = document.getElementById('qrmm')


var box1= document.getElementById('box1')
var box2= document.getElementById('box2')
var box3= document.getElementById('box3')
var box4= document.getElementById('box4')
var box5= document.getElementById('box5')
var box6= document.getElementById('box6')
var box7= document.getElementById('box7')

nc.onfocus = function () {
    nc.placeholder= ""
    box1.innerHTML = "昵称不能超过10个字"
}
nc.onblur = function(){
    nc.placeholder= "请输入"
    box1.innerHTML = ""
}
xm.onfocus = function () {
    xm.placeholder= ""
    box2.innerHTML = "姓名不能超过4个字"
}
xm.onblur = function(){
    xm.placeholder= "请输入"
    box2.innerHTML = ""
}
qq.onfocus = function () {
    qq.placeholder= ""
    box3.innerHTML = "QQ号长度小于等于10大于5位数字"
}
qq.onblur = function(){
    qq.placeholder= "请输入"
    box3.innerHTML = ""
}
sj.onfocus = function () {
    sj.placeholder= ""
    box4.innerHTML = "手机号位长度11位的数字"
}
sj.onblur = function(){
    sj.placeholder= "请输入"
    box4.innerHTML = ""
}
yx.onfocus = function () {
    yx.placeholder= ""
}
yx.onblur = function(){
    yx.placeholder= "请输入"
}
mm.onfocus = function () {
    mm.placeholder= ""
    box6.innerHTML = "密码由字母和数字组成且大于8位小于16位"
}
mm.onblur = function(){
    mm.placeholder= "请输入"
    box6.innerHTML = ""
}
qrmm.onfocus = function () {
    qrmm.placeholder= ""
    box7.innerHTML = "密码和确认密码需相同"
}
qrmm.onblur = function(){
    qrmm.placeholder= "请输入"
    box7.innerHTML = ""
}

var btn1  = document.getElementById("btn1")
var btn2  = document.getElementById("btn2")

btn1.onclick = function (){
    var ncnum = document.getElementById("nc").value.length;
    var xmnum = document.getElementById("xm").value.length;
    var qqnum = document.getElementById("qq").value.length;
    var sjnum = document.getElementById("sj").value.length;
    var mmnum = document.getElementById("mm").value.length;
    var qrmmnum = document.getElementById("qrmm").value.length;
    if(ncnum>10){
        alert("昵称超过了10个字")
    }
    if(xmnum>4){
        alert("姓名超过了10个字")
    }
    if(qqnum<5){
        alert("QQ号长度小于5")
    }
    if(qqnum>=10){
        alert("QQ号长度大于10")
    }
    if(sjnum!=11){
        alert("手机号不等于11位数")
    }
    if(mmnum<8){
        alert("密码小于8位数")
    }
    if(mmnum>16){
        alert("密码大于16位数")
    }
    if(mmnum!=qrmmnum){
        alert("两次输入密码不相同")
    }

}


    btn2.onclick=function(){
        var res = confirm("你确定要重置吗")
        console.log(res)
        if(res){
            nc.value= ""
            xm.value= ""
            qq.value= ""
            sj.value= ""
            yx.value= ""
            mm.value= ""
            qrmm.value= ""
        }
        else{}
    }

样式截图

实现原理

1. 先设置一个表单，并且把项目都给写进去
2. 把每个项目定义好
3. 给每个输入框都设置光标出现事件和光标消失事件，分别控制着提示文字的出现与消失以及”请输入“的出现与否
4. 在设置提交按钮的点击事件，当点击时检查上述项目是否遵循规则
5. 重置按钮设置点击事件，先出现选择框在判断是否重置