表单

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        span{
            font-size: 12px;
        }
        .stats1{
            color: #aaaaaa;
        }
        .stats2{
            color: #000;
        }
        .stats3{
            color: red;
        }
        .stats4{
            color: green;
        }
    </style>

    <script src="js/check.js"></script>

</head>
<body>
    <form action="reg.php" method="post" onsubmit="return regs('click')">
        username:<input type="text" name="username" value="">
        <span class="stats1">请输入用户名</span><br>
        password:<input type="password" name="password" value="">
        <span class="stats1">请输入用户密码</span><br>
        rePass:  <input type="password" name="rePass" value="">
        <span class="stats1">请输入用户确认密码</span><br>
        email:   <input type="text" name="email" value="">
        <span class="stats1">请输入邮箱</span><br>
        other:   <input type="text" name="other" value="">
        <span class="stats1">请输入其它</span><br>
        submit:  <input type="submit" name="sub" value="submit"><br>
    </form>
</body>
</html>
check.js

/**
 * Created by Administrator on 2015/7/22.
 */
//获取下一个SPAN,可以通过这个对象给状态
function gspan(cobj) {
    while (true) {
        if (cobj.nextSibling.nodeName != "SPAN") {
            cobj = cobj.nextSibling;
        }else {
            return cobj.nextSibling;
        }
    }
}
/*
通用检查方法
第一个参数:obj,是用来检查的对象
第二个参数:info,用来检查的提示信息
第三个参数:fun,是一个回调函数,用来检查值是否按条件输入
第四个参数:click只是一个状态,分清楚是单击提交按扭,还是失去焦点
*/
function check(obj,info,fun,click){
    var sp=gspan(obj);
    //获取焦点
    obj.onfocus=function(){

        sp.innerHTML=info;
        sp.className="stats2";
    }
    //失去焦点
    obj.onblur=function(){
        if(fun(this.value)){
            sp.innerHTML="输入正确";
            sp.className="stats4";
        }else{
            sp.innerHTML=info;
            sp.className="stats3";
        }
    }
    if(click=="click"){
        obj.onblur();
    }
}

//页面加载完自动调用
onload=regs;

//一个函数,可以使用onsubmit调用,也可以使用onload调用
function regs(click){
    var stat=true;
    var username=document.getElementsByName("username")[0];
    var password=document.getElementsByName("password")[0];
    var rePass=document.getElementsByName("rePass")[0];
    var email=document.getElementsByName("email")[0];
    var other=document.getElementsByName("other")[0];

    //alert(username.nextSibling.nodeName)
    //alert(gspan(username).nodeName);
    check(username,"用户名的长度要在3-20之间",function(val){
        if(val.match(/^\S+$/) && val.length>=3 && val.length<=20){
            return true;
        }else{
            stat=false;
            return false;
        }
    },click);

    check(password,"密码必须在6-20之间",function(val){
        if(val.match(/^\S+$/) && val.length>=6 && val.length<=20){
            return true;
        }else{
            stat=false;
            return false;
        }
    },click);

    check(rePass,"确认密码要和上面一致,规则也要相同",function(val){
        if(val.match(/^\S+$/) && val.length>=6 && val.length<=20 && val==password.value){
            return true;
        }else{
            stat=false;
            return false;
        }
    },click);

    check(email,"要按邮箱规则输入",function(val){
        if(val.match(/\w+@\w+\.\w/)){
            return true;
        }else{
            stat=false;
            return false;
        }
    },click);

    return stat;

}
大杂烩

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
<form name="frm" action="login.php" onsubmit="return check()" method="post">
    username:<input type="text" name="username" onblur="one()" value=""><br>
    password:<input type="password" name="password" onblur="two()" value=""><br>
    <input type="submit" name="submit2" value="Login"><br>
</form>
<h1 onclick="test()">login h1</h1>

<script>
    function one(){
        if(!document.frm.username.value.match(/^\s+$/)){
            alert("用户名不能为空!");
//            document.frm.username.focus();
 }
    }
    function two(){
        if(!document.frm.password.value==""){
            alert("密码不能为空!");
//            document.frm.password.focus();
 }
    }

    function check(){
        var info="";
        var stats=true;
        if(!document.frm.username.value.match(/^\s+$/)){
            info+="用户名不能为空!\n";
//            document.frm.username.focus();
 stats = false;
        }
        if(document.frm.password.value==""){
            info+="密码不能为空!\n";
//            document.frm.password.focus();
 stats=false;
        }
        if(!stats){
            alert(info);
        }
        return stats;
    }
//    function test(){
//        var frmobj=document.frm;
//        frmobj.action="index.php";
//        frmobj.target="_blank";
//        frmobj.method="get";
//        frmobj.username.value = "admin";
//        frmobj.submit();
//    }
//    setTimeout("test()",3000);
</script>
    <!--<frameset rows="100,*">-->
        <!--<frame name="top"/>-->
        <!--<frameset cols="150,*">-->
                <!--<frame name="menu" src="menu.html"/>-->
                <!--<frame name="main"/>-->

        <!--</frameset>-->
    <!--</frameset>-->

    <!--<script>-->
        <!--with (document){-->
            <!--write("您的屏幕显示设定值如下:<p>");-->
            <!--write("屏幕的实际高度为:",screen.availHeight,"<br>");-->
            <!--write("屏幕的实际宽度为:",screen.availWidth,"<br>");-->
            <!--write("屏幕的色盘深度为:",screen.colorDepth,"<br>");-->
            <!--write("屏幕区域的高度为:",screen.height,"<br>");-->
            <!--write("屏幕区域的宽度为:",screen.width,"<br>");-->
            <!--write("--------------------------------------------------------------")-->
        <!--}-->
    <!--</script>-->

<!--<div id="one">-->
    <!--aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>-->
    <!--aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>-->
    <!--aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>-->
    <!--aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>-->
    <!--aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>-->
    <!--aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>-->
    <!--aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>-->
    <!--aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>-->
    <!--aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>-->
<!--</div>-->


    <!--<input type="button" onclick="copyC()" value="copyCode">-->
<!--<script>-->
    <!--var one=document.getElementById("one");-->
    <!--function copyC(){-->
        <!--var content=one.innerText;-->

        <!--//剪切板-->
        <!--window.clipboardData.setData("Text",content);-->
    <!--}-->
<!--</script>-->
</body>
</html>


你可能感兴趣的:(表单)