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

时间：2020-07-12 22:35:28 阅读：130 评论：0 收藏：0 [点我收藏+]

问题描述-

表单通过离焦事件触发校验，校验完成后改变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边框变色，以接近预期效果。