如何在js校驗完成后動態修改 placeholder？

問題描述-

表單通過離焦事件觸發校驗，校驗完成后改變input框中的placeholder顯示校驗結果。

 

問題解決-

抱歉，問題並沒有完全解決。目前只能改變placeholder的文字，但是文字顏色不可控制。

input框

<input type="text" id="username" name="username" placeholder="請輸入賬號">

//組件失去焦點時調用各自的校驗方法
$("#username").blur(checkUsername);

function checkUsername(){
　　var username=$("#username").val();
   var reg_checkUsername=/^\w{5,20}$/;
   var flag=reg_checkUsername.test(username);
   if(flag){
　　　　$("#username").css("border","");
　　}else{
　　　　$("#username").val("");
　　　　//邊框變色
　　　　$("#username").css("border","red 1px solid")
　　　　//改變文字
　　　　$("#username").prop("placeholder","請輸入！字母,數字,下划線5~20位");
　　}
   // alert("驗證用戶名！"+username+":"+flag);
   return flag;
}

相對應的，我進行了input邊框變色，以接近預期效果。

 

嘗試進行class屬性的添加，但沒有效果，嘗試方法：https://my.oschina.net/u/2351298/blog/819345

理論上應該可以改變，但實際上卻是沒有效果。

 

總結-

基本解決問題，但無法控制顏色很遺憾，希望有大佬指出錯在哪里，謝謝！