简单表单校验

校验部分

事件：

• onblur：元素失去焦点
• onfocus：元素获得焦点
• onclick：鼠标点击某个对象
• ondbclick：鼠标双击某个对象
• onmouseout：鼠标从某元素移开
• onmouseover：鼠标被移到某元素之上
• onsubmit：提交按钮被点击 只能用于type=submit的类型上，普通button不能用

简单校验，没有提交路径，只是检查格式是否正确，事件都用的是onblur事件

<script>
    //校验用户名
    var uobj = document.getElementById("user");
    var span_user = document.getElementById("span_user");
    //失去焦点
    uobj.onblur=function (){
        var reg_user =/^\w{3}$/;
        if(uobj.value == ""){
            span_user.innerText="请输入用户名";
            span_user.style.color="red";
            span_user.style.fontSize="12px";
        }else if(!reg_user.test(uobj.value)){
            span_user.innerHTML="用户名格式不正确";
            span_user.style.color="red";
            span_user.style.fontSize="12px";
        } else {
            span_user.innerHTML="";
        }
    }

    //校验密码
    var pobj = document.getElementById("password");
    var span_pwd = document.getElementById("span_password");
    pobj.onblur = function() {
        var reg_paw = /^\w{5,16}$/;
        if(pobj.value == ""){
            span_pwd.innerHTML="密码不能为空";
            span_pwd.style.color="red";
            span_pwd.style.fontSize="12px";
        }else if(!reg_paw.test(pobj.value)){
            span_pwd.innerHTML="密码格式不正确，";
            span_pwd.style.color="red";
            span_pwd.style.fontSize="12px";
        } else {
            span_pwd.innerHTML="";
        }
    }

    //确认密码
    var apobj = document.getElementById("apassword");
    var span_apwd = document.getElementById("span_apassword");
    apobj.onblur = function() {

        if(pobj.value != apobj.value){
            span_apwd.innerHTML="第二次密码与第一次密码不相同，请检查";
            span_apwd.style.color="red";
            span_apwd.style.fontSize="12px";
        }else{
            span_apwd.innerHTML="";
        }
    }

    //校验email
    var eobj = document.getElementById("email");
    var span_email = document.getElementById("span_email");
    eobj.onblur=function () {
        var reg_email = /^\w{3,5}@[a-z]\.com$/;
        if (!reg_email.test(eobj.value)){
            span_email.innerHTML="email格式不正确";
            span_email.style.color="red";
            span_email.style.fontSize="12px";
        } else{
            span_email.innerHTML="";
        }
    }
 </script>

body部分

<form action="" method="post" >
        <table border="1" cellpadding="0" cellspacing="0" width="800px" style=“padding: 100px;margin: auto;”>

            <tr>
                <th colspan="2">欢迎注册</th>   //合并两列
            </tr>
            <tr>
                <td align="right">用户名</td>
                <td align="left">
                    <input type="text" name="user" id="user" value="" placeholder="请输入用户名"/>
                    <span id="span_user"></span>  //提示信息标签
                </td>
            </tr>
            <tr>
                <td align="right">密码</td>
                <td align="left">
                    <input type="password" name="" id="password" value=""  placeholder="密码长度5到16位"/>
                    <span id="span_password"></span>
                </td>
            </tr>
            <tr>
                <td align="right">确认密码</td>
                <td align="left">
                    <input type="password" name="" id="apassword" value="" />
                    <span id="span_apassword"></span>
                </td>
            </tr>
            <tr>
                <td align="right">Email</td>
                <td align="left">
                    <input type="text" name="" id="email" value="" />
                    <span id="span_email"></span>
                </td>
            </tr>

            <tr>
                <td align="right">姓名</td>
                <td align="left">
                    <input type="text" name="" id="name" value="" />
                    <span id="span_name"></span>
                </td>
            </tr>

            <tr>
                <td align="right">性别</td>
                <td align="left">
                    男<input type="radio" name="sex"  value="1" />
                    女<input type="radio" name="sex"  value="0" />
                </td>
            </tr>

            <tr>
                <td align="right">出生日期</td>
                <td align="left"><input type="text" name="" id="birthday" value="" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" name="" id="" value="注册" /></td>
            </tr>

        </table>
    </form>