如果手机验证状态发生变化，如何将颜色从红色变为绿色？

如何解决如果手机验证状态发生变化，如何将颜色从红色变为绿色？

我目前正在开展一个项目（基于 Django），该项目有一个用户配置文件，用户可以在其中验证他们的手机号码。为此，我正在使用 Twilio。

我想要的是，当用户查看他们的个人资料时，应该在手机号码字段正下方有一个“验证您的手机号码”选项，该字段将显示为红色。一旦用户验证了这一点（通过一些后端 Django/python 的东西）并再次返回到个人资料页面，该消息应该被“验证”（绿色）。

我想要 CSS 和 JavaScript 代码来实现这一点，因为对于 SMS 验证和所有后端内容，我已经有了代码。

任何形式的帮助将不胜感激。

解决方法

这是由 AJAX 完成的，步骤如下

创建一个检查用户状态的新视图，例如 is_verified_user 并返回 True/False

编写一个调用视图并检查响应的JS函数，应该是这样的

 function check_user_status(){
         $.ajax({"url":"{%url 'is_verified_user'%}",success:function(data){
         if (data == "True")
              {     //change the colors}
         else
               setTimeout("check_user_status",3000)
             // Check again in 3 seconds
        }
        })
     }

用户点击“验证您的手机号码”后，调用 check_user_status 函数开始检查。

P.S 你需要 JQuery。

检查api响应并使用三元运算符

React JS 中的示例

const [state,setState] = useState(false)

useEffect(() => { //调用api

let response = axios.get('/')

让结果 = response.verified ？真：假

setState(result)

},[状态])

返回（

)