今天我用JS寫了一個驗證表單,代碼以下!!!

時間 2019-11-20

原文原文鏈接

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>javascript

        .hw{
            border:1px solid red;
        }
    </style>html

             function test1()
             {
                  alert("我剛纔失去焦點了!!!");
             }
         */app

        //用戶名文本框失去焦點時用驗證: 7-14任意字符
        function checkName()
        {
            var unameText=document.getElementById("userNameId");//獲取輸入用戶名的文本框
            var unameSpan=document.getElementById("nameError_span");//獲取用戶名的錯誤提示信息
            var reg=/^.{7,14}$/;spa

            if(!reg.test(unameText.value))
            {
                unameSpan.innerHTML="<img src='img/error_Picture.jpg'>用戶名不合法!"
                unameText.className="hw";
                return;
            }
            else
            {
                unameSpan.innerHTML="<img src='img/right_Pictrue.jpg'>"
                unameText.className="";
            }
        }orm

        //密碼文本框失去焦點時用驗證: 6-14任意字符
        function checkPass()
        {htm

            var upassText=document.getElementById("userPassId");//獲取輸入密碼的密碼文本框
            var upassSpan=document.getElementById("passError_span");//獲取密碼的錯誤提示信息
            var reg=/^.{6,14}$/;對象

            if(!reg.test(upassText.value))
            {
                upassSpan.innerHTML="<img src='img/error_Picture.jpg'>密碼不合法!";
                upassText.className="hw";
                return;
            }
            else
            {
                upassSpan.innerHTML="<img src='img/right_Pictrue.jpg'>";
                upassText.className="";
            }事件

}

        function test1()
        {
            //1.獲取文檔中的DOM對象
            var myForm=document.getElementById("myForm");//獲取表單

var unameText=document.getElementById("userNameId");//獲取輸入用戶名的文本框
var upassText=document.getElementById("userPassId");//獲取輸入密碼的密碼文本框

var unameSpan=document.getElementById("nameError_span");//獲取用戶名的錯誤提示信息
var upassSpan=document.getElementById("passError_span");//獲取密碼的錯誤提示信息

var userName_reg=/^.{7,14}$/;
var userPassword_reg=/^.{6,14}$/;

            //2.驗證(要改樣式)
            //用戶名:7-14任意字符
            if(!userName_reg.test(unameText.value))
            {
                unameSpan.innerHTML="<img src='img/error_Picture.jpg'>用戶名不合法!"
                unameText.className="hw";
                //return;
            }
            else
            {
                unameSpan.innerHTML="<img src='img/right_Pictrue.jpg'>"
                unameText.className="";
            }

            //密碼:6-14任意字符
            if(!userPassword_reg.test(upassText.value))
            {
                upassSpan.innerHTML="<img src='img/error_Picture.jpg'>密碼不合法!";
                upassText.className="hw";
                return;
            }
            else
            {
                upassSpan.innerHTML="<img src='img/right_Pictrue.jpg'>";
                upassText.className="";
            }

            //3.提交表單
            myForm.submit();
        }

</script>
</head>
<body>

</body></html>