用户名密码正确,文字变绿,错误变红

密码正确,文字变绿,错误变红

    <form action="#" name="formName" method="GET">
        <label> 用户名</label><input type="text" name="UserName" id="id_UserName"/><label>用户名的长度位6-8为,由字母数字下划线组成</label> <br />
        <label> 密码</label><input type="password" name="UserPwd" id="id_UserPwd"/><label>密码的长度位6-8为,由数字组成</label> <br />
        <button type="button" name="tj" id="id_tj" onclick="checkform()"> 提交 </button>
    </form>
    
    <script type="text/javascript">
         function checkform(){
             var  _UserNameValue=document.getElementById('id_UserName').value;
             var _UserPwdValue=document.getElementById('id_UserPwd').value;
             var reg=/[a-zA-Z0-9_]{6,8}$/;   
             var jieguo=_UserNameValue.search(reg);    
             if( jieguo  ==  0){
                  alert("用户名输入正确") 
               }else{ 
                    alert("用户名输入错误") 
               }
               
              var  pwdReg=/[0-9]{6,8}$/;
             var   jieguo2=pwdReg.test(_UserPwdValue);  
            
              if(jieguo2){
                 
                  alert("密码输入正确") 
              }else{
                   alert("密码输入错误") 
              }
         }
    </script>
</body>

document.getElementById('id_UserName').nextElementSibling.style.color = 'red';

document.getElementById('id_UserName').nextElementSibling.style.color = 'blue';

https://blog.csdn.net/qq_41353397/article/details/108701100