如何在js校验完成后动态修改 placeholder？

Posted 2020-12-17 YFEYI

问题描述-

表单通过离焦事件触发校验，校验完成后改变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

理论上应该可以改变，但实际上却是没有效果。

 

总结-

基本解决问题，但无法控制颜色很遗憾，希望有大佬指出错在哪里，谢谢！