有没有办法在 Django 中设置字段警报的样式？

Question

我正在研究我网站的样式，我想为表单的这一部分设置样式：

我试过了，field.errors但不是这样。有任何想法吗？

Answer 1

JS您可以在代码中更改此样式访问此页面(function() {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; = document.getElementById('username');&nbsp; &nbsp; var form&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= document.getElementById('form');&nbsp; &nbsp; var elem&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= document.createElement('div');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elem.id&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; = 'notify';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elem.style.display = 'none';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; form.appendChild(elem);&nbsp; &nbsp; input.addEventListener('invalid', function(event){&nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; if ( ! event.target.validity.valid ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input.className&nbsp; &nbsp; = 'invalid animated shake';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elem.textContent&nbsp; &nbsp;= 'Username should only contain lowercase letters e.g. john';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elem.className&nbsp; &nbsp; &nbsp;= 'error';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elem.style.display = 'block';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; input.addEventListener('input', function(event){&nbsp; &nbsp; &nbsp; &nbsp; if ( 'block' === elem.style.display ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input.className = '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elem.style.display = 'none';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });})();&nbsp;html {&nbsp; &nbsp; &nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; }&nbsp; &nbsp; *,&nbsp; &nbsp; *:before,&nbsp; &nbsp; *:after {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-sizing: inherit;&nbsp; &nbsp; }&nbsp; &nbsp; body {&nbsp; &nbsp; &nbsp; &nbsp; font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;&nbsp; &nbsp; &nbsp; &nbsp; background-color: #ECEFF1;&nbsp; &nbsp; }&nbsp; &nbsp; form {&nbsp; &nbsp; &nbsp; &nbsp; max-width: 300px;&nbsp; &nbsp; &nbsp; &nbsp; margin-top: 60px;&nbsp; &nbsp; &nbsp; &nbsp; margin-right: auto;&nbsp; &nbsp; &nbsp; &nbsp; margin-left: auto;&nbsp; &nbsp; &nbsp; &nbsp; text-align: left;&nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; padding-top: 80px;&nbsp; &nbsp; }&nbsp; &nbsp; label,&nbsp; &nbsp; input {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; }&nbsp; &nbsp; label {&nbsp; &nbsp; &nbsp; &nbsp; font-size: 12px;&nbsp; &nbsp; &nbsp; &nbsp; text-transform: uppercase;&nbsp; &nbsp; &nbsp; &nbsp; color: #B0BEC5;&nbsp; &nbsp; &nbsp; &nbsp; margin-bottom: 10px;&nbsp; &nbsp; }&nbsp; &nbsp; input {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; outline: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 2px solid #B0BEC5;&nbsp; &nbsp; }&nbsp; &nbsp; input.invalid {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-color: #DD2C00;&nbsp; &nbsp; }&nbsp; &nbsp; #notify {&nbsp; &nbsp; &nbsp; &nbsp; margin-top: 5px;&nbsp; &nbsp; &nbsp; &nbsp; padding: 10px;&nbsp; &nbsp; &nbsp; &nbsp; font-size: 12px;&nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; color: #fff;&nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; top: 0;&nbsp; &nbsp; &nbsp; &nbsp; left: 0;&nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; }&nbsp; &nbsp; #notify.error {&nbsp; &nbsp; &nbsp; &nbsp; background-color: #DD2C00;&nbsp; &nbsp; }<form id="form">&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <label for="username">Username</label>&nbsp; &nbsp; &nbsp; &nbsp; <input name="username" type="text" placeholder="Username" pattern="[a-z]{1,15}" id="username" value="12345">&nbsp; &nbsp; </div></form>