js实现一个简单用户注册页面

功能要求：

 

 

<!doctype html>
<html>
    <head>
        <title>注册页面</title>
    </head>
    <body background="test.png">
        <script type="text/javascript">
            window.onload=function(){
                //设置用户名的全局变量
​
                var user="";
                //正则表达式：表示用户名由6-14位的字母或者数字组成
                var userRegExp=/^[A-Za-z0-9]{6,14}$/;
                var flag="";
                
                //设置邮箱的全局变量
                var emailAddress="";
                var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                var ok="";
​
                //设置密码和确认密码的全局变量
                var pswFirst="";
                var pswSecond="";
                //检测用户名的合法性
                
                document.getElementById("username").onblur=function(){
                    user=document.getElementById("username").value.trim();
                    flag=userRegExp.test(user);
                    if(!flag){
                        //如果不符合正则表达式，则显示不合法
                        document.getElementById("usernameError").innerText = "用户名不合法";
                        
                    }
                    else{
                        //假如用户名合法，则当光标离开时，用户名中的空格将会自动去除。
                        document.getElementById("username").value=user;
                    }
                }
                //当光标回到用户名的输入框之后，提示消失
                document.getElementById("username").onfocus=function(){
                    if(!flag){
                        document.getElementById("usernameError").innerText="";
                        document.getElementById("username").value="";
                    }
                }
                        
                //检测邮箱的合法性
                document.getElementById("email").onblur=function(){
                    emailAddress=document.getElementById("email").value;
                    ok=emailRegExp.test(emailAddress);
                    if(!ok){
                        document.getElementById("emailError").innerText = "邮箱地址不合法";
                    }
                }
                //当光标回到邮箱的输入框之后，提示消失
                document.getElementById("email").onfocus=function(){
                    if(!ok){
                        document.getElementById("emailError").innerText="";
                        document.getElementById("email").value="";
                    }
                }
​
                //检验第二次输入的密码是否和第一次输入的密码一致
                document.getElementById("ensurepassword").onblur=function(){
                    pswFirst=document.getElementById("password").value;
pswSecond=document.getElementById("ensurepassword").value;
if(!(pswFirst===pswSecond)){
document.getElementById("passwordError").innerText="两次输入的密码不一样!";
    }
    }
//当光标回到确认密码的输入框之后，提示消失
document.getElementById("ensurepassword").onfocus=function(){
document.getElementById("passwordError").innerText="";
    }
​
//设置提交成功提示信息
document.getElementById("submit1").onclick=function(){
if(flag&&ok&&(pswFirst===pswSecond)){
document.getElementById("userform").submit();

    }
else{
alert("请输入合法的信息");
    }
    }
​
    }
</script>
<form id=userform action="http://localhost:8080/jd/save" method="get" >
<table>
<tr>
<td>用户名:</td>
<td><input type=text name=username id=username /></td>
<td><span id=usernameError style="color : red ;font-size : 12px"></span></td>

</tr>
<tr>
<td>邮箱地址:</td>
<td><input type=text name=email id=email /></td>
<td><span id=emailError style="color : red; font-size : 12px"></span></td>
</tr>
​
<tr>
<td>密码:</td>
<td><input type=text name=password id=password /></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type=text name=ensurepassword id=ensurepassword /></td>
<td><span id=passwordError style="color : red ;font-size : 12px;"></span></td>

</tr>
<tr>
<td><input type=button value=提交 id=submit1 /></td>
<td><input type=reset value=重置 id=reset /></td>
</tr>
</table>
</form>
</body>
</html>

代码中的图片素材：

 

 

运行结果：

 

 

posted @ 2021-09-20 16:59  AMHAO  阅读(555)  评论(0)  编辑  收藏  举报