JS的表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交表单</title>
</head>
<body>
<script type="text/javascript">
   /* String.prototype.trim()=function () {
        return this.replace(/^\s+/,"").replace(/\s+$/,"");
    }*/
   var ok=false;
    function checkUsername(username) {
        var usernameError=document.getElementById("usernameError");
        username=username.trim();
        if(username === ""){
            usernameError.innerHTML="用户名不能为空";
            ok=false;
        }else{
            if(username.length >6 && username.length < 14){
                usernameError.innerHTML="用户名的长度在6到14位";
                ok=false;
            }else{
                usernameError.innerHTML="";
                ok=true;
            }
        }
    }
    function clearUsernameError() {
        var usernameError=document.getElementById("usernameError");
        usernameError.innerHTML="";
    }
    function checkPwd() {
        var password=document.getElementById("password");
        var confirmPasswd=document.getElementById("confirmPasswd");
        var pwdError=document.getElementById("pwdError");
        if(password === confirmPasswd){
            pwdError.innerHTML="";
            ok=true;
        }else{
            pwdError.innerHTML="密码不对";
            ok=false;
        }
    }
    function clearPwdError() {
        var pwdError=document.getElementById("pwdError");
        pwdError.innerHTML="";
    }
    function checkAll() {
        var username=document.getElementById("username").value;
        if(checkUsername(username) && checkPwd()){
            var userForm=document.getElementById("userForm");
            userForm.action="";
            userForm.method="get";
            userForm.submit();
        }
    }
    
</script>
<form id="userForm">
   用户名 <input type="text"
           id="username"
           name="username"
           onblur="checkUsername(this.value)"
           onfocus="clearUsernameError();" />
    <span id="usernameError"></span><br>
    密码<input type="password"
           id="password"
           name="password"
           onfocus="clearPwdError();" /><br>
   确认密码 <input type="password"
           id="confirmPasswd"
           name="confirmPasswd"
               onblur="checkPwd()"
           onfocus="clearPwdError();" />
    <span id="pwdError"></span><br>
    <input type="button"
           value="注册"
           onclick="checkAll();" /><br>
</form>

</body>
</html>
猜你喜欢
