html5自带表单验证的用法

HTML5提供了一系列强大的表单验证功能，使开发者能够轻松构建用户友好的表单界面。以下是一些高级用法，帮助你发挥HTML5表单验证的潜力：

1. 使用输入类型自动验证

HTML5提供了一些特殊的输入类型，比如：

• email：自动验证电子邮件格式。

• url：验证URL格式。

• number：限制用户只能输入数字。

• tel：用于电话号码。

<form>
  <input type="email" required />
</form>

　　

2. 利用属性增强验证功能

• required：确保字段必填。

• pattern：定义字段的正则表达式。

• min 和 max：设置数值范围。

• maxlength 和 minlength：限制字符串长度

<input type="text" pattern="[A-Za-z0-9]{6,12}" title="请输入6到12位字母或数字" />

　　

3. 自定义错误消息

通过setCustomValidity可以自定义验证失败时的提示信息。

const inputElement = document.getElementById('input');
inputElement.addEventListener('input', function () {
  if (this.validity.patternMismatch) {
    this.setCustomValidity('请按照指定格式填写');
  } else {
    this.setCustomValidity('');
  }
});

　　

4. 使用novalidate属性控制验证

如果想禁用表单的默认验证，可以添加novalidate属性。

<form novalidate>
  <input type="email" />
</form>

　　

5. 结合CSS进行实时反馈

可以利用:invalid和:valid伪类，根据验证状态动态更改输入框样式。

input:invalid {
  border-color: red;
}
input:valid {
  border-color: green;
}

　　

6.搭配伪类进行显示

如果你想在某个元素的hover状态下，影响另一个带有特定id的元素，可以通过CSS的伪类和JavaScript实现更明确的效果。

1. 用相邻关系实现
如果#id是<a>标签的子元素，或者具有直接关系，可以这样写：

<a href="#">
  Hover me!
  <span id="id">I am affected</span>
</a>

<style>
  a:hover #id {
    color: red;
  }
</style>

在这里，当鼠标悬停在<a>上时，子元素#id会变成红色。

 

2. 如果是独立元素，需要通过JavaScript实现
如果#id是一个完全独立的元素，且需要在<a>的hover时改变样式，可以这样：

<a href="#" id="link">Hover me!</a>
<div id="box">I am affected</div>

<style>
  #box {
    color: black;
  }
  #link:hover + #box {
    color: red; /* 改变颜色 */
  }
</style>

在这里，使用CSS的+选择器，它会选择紧跟在#link之后的兄弟元素#box。如果两个元素不相邻，则需要用JavaScript控制逻辑。

 

3. 通过JavaScript动态控制
如果HTML结构复杂或需要更加精确的控制，可以使用JavaScript：

<a href="#" id="link">Hover me!</a>
<div id="box">I am affected</div>

<script>
  const link = document.getElementById("link");
  const box = document.getElementById("box");

  link.addEventListener("mouseover", function() {
    box.style.color = "red";
  });

  link.addEventListener("mouseout", function() {
    box.style.color = "black";
  });
</script>

总结

• 如果#id是a的子元素，可以直接在CSS中使用a:hover #id。

• 如果是兄弟关系，使用+或~兄弟选择器。

• 如果两者没有直接关系，使用JavaScript更灵活。

 

一些验证有关的原生js方法

        document.getElementById("username").checkValidity()   //返回某个控件的验证结果  true  false

    
        function validatePassword() {
          var password = document.getElementById("password");
          var confirmPassword = document.getElementById("confirm_password");

            if (password.value !== confirmPassword.value) {
              confirmPassword.setCustomValidity("两次密码输入不一致，请重新输入！"); //设置错误消息
              confirmPassword.reportValidity();  //立即显示错误消息
               return false;
            } else {
              confirmPassword.setCustomValidity("");            
            }
        }

//setCustomValidity() 只是 设置 了错误信息，但不会立即显示。
//只有当用户 尝试提交表单 或 调用 reportValidity() 时，浏览器才会显示错误提示。



//如果想在输入完成后立即显示错误提示，则在控件上添加onchange事件
<  input id="old_password" class="form-control" type="text" onchange="checkpwd()"  />
function checkpwd(){
    var old_password = document.getElementById("old_password");
    if(old_password.checkValidity()){
        console.log("验证通过");
    }
    else
    {
        old_password.setCustomValidity("必填"); //不添加此行则使用默认提示
        console.log("验证失败");             
        old_password.reportValidity();     //立即显示错误提示，否则表单提交时才显示
    }
}