首页 > 代码库 > 作业【检查表单】

作业【检查表单】

2024-09-09 08:46:45   219人阅读

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>写多一次表单验证</title> 
    <style type="text/css"></style>
    <script type="text/javascript"></script>
</head>
<body>
    <form action="index.html" onsubmit="return checkForm()">
        <p>
            name<input type="text" name="userName" id="userName" onfocus="name_onfocus()" onblur="name_onblur()" />
            <span id="name_res"></span>
        </p>
        <p>
            pass&nbsp;&nbsp;<input type="password" name="userPassword" id="userPassword" onfocus="pass_onfocus()"  onblur="pass_onblur()"/>
            <span id="pass_res"></span>
        </p>
        <p>
            <input type="submit" value="http://www.mamicode.com/submit" />
        </p>
    </form>
    <script>
        //用户名框获取焦点事件
        function name_onfocus(){
            //获取焦点则更改旁边的提示内容
            var name_res = document.getElementById("name_res");
            name_res.innerHTML = "<font color=‘red‘>请输入用户名</font>";
        }

        //密码框获取焦点事件
        function pass_onfocus(){ 
            var pass_res = document.getElementById("pass_res");
            pass_res.innerHTML = "<font color=‘red‘>请输入密码</font>";
        }
 
        //用户名输入框失去焦点
        function name_onblur(){ 
            //这里是获取用户名输入框旁边的span标签元素
            var name_res = document.getElementById("name_res");
            //获取用户名的value
            var name_value = http://www.mamicode.com/document.getElementById("userName").value;
            //判断用户名的各种情况
            if(name_value.length == 0){//判断是否有输入用户名                
                name_res.innerHTML = "<font color=‘red‘>你没有输入用户名</font>";
                return false;
            }else if(name_value.length < 5 || name_value.length > 18){//判断用户名的长度是否符合要求
                name_res.innerHTML = "<font color=‘red‘>用户名只能5-18位之间</font>";
                return false;
            }else if(!checkUser(name_value)){//判断用户名是否有非法字符
                name_res.innerHTML = "<font color=‘red‘>用户名含有非法字符</font>";
                return false;
            }else{
                name_res.innerHTML = " ";
                return true;
            }
        }

        //密码框失去焦点事件
        function pass_onblur(){
            //获取密码框旁边的span标签
            var pass_res = document.getElementById("pass_res"); 
            //获取密码的value
            var pass_value = http://www.mamicode.com/document.getElementById("userPassword").value;
            //判断密码的各种情况
            if(pass_value.length == 0){//这是判断没有输入密码
                pass_res.innerHTML = "<font color=‘red‘>你没有输入密码</font>";
                return false;
            }else if(pass_value.length < 5 || pass_value.length > 18){//这是判断密码的长度
                pass_res.innerHTML = "<font color=‘red‘>密码只能5-18位之间</font>";
                return false;
            }else if(!checkUser(pass_value)){//判断密码是否有非法字符
                pass_res.innerHTML = "<font color=‘red‘>密码含有非法字符</font>";
                return false;
            }else{
                pass_res.innerHTML = " ";
                return true;
            }
        }

        //判断是否有非法符号
        function checkUser(user){
            var str = ["?",">","<","$","#","@","!"];//非法字符数组
            for(var i = 0 ; i<= user.length ; i++){
                for(var j = 0 ; j<= str.length ; j++){
                    //通过循环把用户名或者密码分别与非法字符匹配
                    if(user.charAt(i) == str[j]){
                        //找到非法字符则返回false
                        return false;
                    }
                }
            }
            return true;
        }

        //检查表单
        function checkForm(){
            var pass_flag    = pass_onblur();
            var name_flag   = name_onblur();
            //用户名和密码同时合法才能返回true
            if(pass_flag && name_flag){
                return true;
            }else{
                return false;
            }
        }
    </script>
</body>
</html>

 

作业【检查表单】


联系
我们