JS-06

表单验证

页面准备

<form action="http://www.baidu.com" method="post" onsubmit="return demo();">
            <table>
                <tr>
                    <td>用户名:<font color="red">*</font></td>
                    <td>
                        <input type="text" name="name" value="请输入用户名" id="user" 
                                onblur="checkuser()" onfocus="clearUserNameValue()">
                        <span id="userspan"></span>
                    </td>
                    
                </tr>
                <tr>
                    <td>密码:<font color="red">*</font></td>
                    <td><input type="text" name="pwd" value="请输入密码"></td>
                    <span id="pwdspan"></span>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit"></td>
                    
                </tr>
            </table>
        </form>

清空输入的用户名

<script>
        /* 清除请输入用户名 */
        function clearUserNameValue(){
            var user_input = document.getElementById("user");
            if(user_input.value == "请输入用户名"){
                user_input.value ="";
            }
        }
    </script>

校验用户名

/* 校验用户名 */
        function checkuser(){
            var username = document.getElementById("user").value;
            var regExp = new RegExp("^[a-zA-Z]{4,12}$");
            if(regExp.test(username)){
                document.getElementById("userspan").innerHTML="";
            }else{
                document.getElementById("userspan").innerHTML="用户名必须是字母，并且4-12位!";
            }
        }

校验提交

/* 校验用户名 */
        function checkuser(){
            var username = document.getElementById("user").value;
            var regExp = new RegExp("^[a-zA-Z]{4,12}$");
            if(regExp.test(username)){
                document.getElementById("userspan").innerHTML="";
                 return true;
            }else{
                document.getElementById("userspan").innerHTML="用户名必须是字母，并且4-12位!";
                 return false;
            }
        }

        /* 校验不通过不提交 */
        function demo(){
            if( !checkuser()){
                return false;
            }
        }

        <form action="http://www.baidu.com" method="post" onsubmit="return demo();">