表单验证

来源：互联网发布：js ajax done 编辑：程序博客网时间：2024/06/10 01:51
<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title></head><script>    function checkForm(){        var flag = true;        //1.获取用户名和密码里面输入的内容        var usernameValue=document.getElementById("username").value;        var passwordValue=document.getElementById("password").value;        //alert(usernameValue+"---"+passwordValue);        //2.校验数据        if(usernameValue == null || usernameValue== ""){            //若为空 在span中添加错误信息            //a.获取span            var username_msgObj=document.getElementById("username_msg");            //b.设置错误信息            //username_msgObj.innerHTML="用户名不能为空";            username_msgObj.innerHTML="<font color='red'>用户名不能为空</font>";            //将flag置为false;            flag=false;        }else{            //a.获取span            var username_msgObj=document.getElementById("username_msg");            //b.设置错误信息            username_msgObj.innerHTML="";        }        //3.校验密码        if(passwordValue == null || passwordValue== ""){            //若为空 在span中添加错误信息            //a.获取span            var password_msgObj=document.getElementById("password_msg");            //b.设置错误信息            password_msgObj.innerHTML="密码不能为空";            password_msgObj.style.color="red";            //将flag置为false;            flag=false;        }        return flag;    }    //方式1:    /*function loseFocus(){     //1.获取input标签内容     var usernameValue=document.getElementById("username").value;     //2,判断值 若不满足 给相应的span设置内容     if(usernameValue==""){     document.getElementById("username_msg").innerHTML="用户名不能为空";     }else{     document.getElementById("username_msg").innerHTML="";     }     }*/    /*function loseFocus(obj){     alert(obj.value);     }*/    function loseFocus(obj){       // alert(obj);        if(obj==""|| obj==null){            document.getElementById("username_msg").innerHTML="<font color='red''>用户名不能为空 ！ </font>";        }        else{            document.getElementById("username_msg").innerHTML="<font color='red''>用户名不能为空 ！ </font>";        }    }</script><body><form action="#" method="get" onsubmit="return checkForm()">    <table width="60%" height="60%"  align="center" bgcolor="#ffffff">        <tr>            <td colspan="3">会员注册</td>        </tr>        <tr>            <td width="20%">用户名:</td>            <td width="40%"><input type="text" name="username" id="username" onblur="loseFocus(this.value)"></td>            <td width="40%"><span id="username_msg"></span></td>        </tr>        <tr>            <td>密码:</td>            <td><input type="password" name="password" id="password"></td>            <td><span id="password_msg"></span></td>        </tr>        <tr>            <td>确认密码:</td>            <td><input type="password" name="repassword" id="repassword"></td>            <td><span id="repassword_msg"></span></td>        </tr>        <tr>            <td colspan="2">                <input type="submit" value="注册" />            </td>        </tr>    </table></form></body></html>
0 0