如何阻止HTML5表单验证的默认验证？

老师，代码字数太多了，超过回复的限定了，我就先发图好了，这页面是我新开的，一进来就是这样子，归根结底，就是因为在我网页打开伊始，系统就直接为我的input标签添加上了:invalid这个伪元素，才将input框验证的hub内的文字变成了红色，确认密码我是用的JS验证，所以没这个毛病。其他都是用的HTML5验证，或者就还没写.

用户名和登录密码我都是用了novalidate的，如：<input type="text" name="usr-name" pattern="^[a-zA-Z]\w{5,29}$|[\u4e00-\u9fa5]{3,15}$" required="required" placeholder="用户名设置成功后不可修改" novalidate="novalidate" id="user-name" class="input-style" />但是没什么效果。通过打印对应的inputDOM，我没在input对象的一长串属性里看到novalidate属性，这也是个疑问。