如何为HTML表单设置自定义验证消息？

使用 setCustomValidity：

document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("This field cannot be left blank");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

按照@itpastorn在评论中的建议，我从 Mootools 改用了普通的 JavaScript，但如有必要，您应该能够计算出 Mootools 等效项。

如果设置为空字符串以外的任何值，则会导致该字段被视为无效;因此，您必须在测试有效性之前清除它，您不能只是设置它并忘记它。setCustomValidity

正如@thomasvdb在下面的评论中指出的那样，您需要在特定事件中清除自定义有效性，否则可能会有额外的处理程序通过来清除它。invalidoninvalid

注意：这在 Chrome 中不再有效，在其他浏览器中也未进行测试。请参阅下面的编辑。这个答案留在这里供历史参考。

如果您觉得验证字符串确实不应该通过代码设置，则可以将输入元素的 title 属性设置为“此字段不能留空”。（适用于 Chrome 10）

title="This field should not be left blank."

查看 http://jsfiddle.net/kaleb/nfgfP/8/

在Firefox中，您可以添加以下属性：

x-moz-errormessage="This field should not be left blank."

编辑

自从我最初写这个答案以来，这似乎发生了变化。现在添加标题不会更改有效性消息，它只是为消息添加附录。上面的小提琴仍然适用。

编辑 2

自 Chrome 51 起，Chrome 现在不对 title 属性执行任何操作。我不确定这在哪个版本中发生了变化。

我制作了一个小库，以方便更改和翻译错误消息。您甚至可以按错误类型更改文本，目前在Chrome或Firefox中不可用。在 GitHub 上查看并提供反馈。titlex-moz-errormessage

它的用法如下：

<input type="email" required data-errormessage-value-missing="Please input something">

jsFiddle 上有一个演示。

借助事件控制自定义消息非常简单HTML5oninvalid

代码如下：

User ID 
<input id="UserID"  type="text" required 
       oninvalid="this.setCustomValidity('User ID is a must')">

借助事件控制自定义消息非常简单HTML5oninvalid

代码如下：

<input id="UserID"  type="text" required="required"
       oninvalid="this.setCustomValidity('Witinnovation')"
       onvalid="this.setCustomValidity('')">

这是最重要的：

onvalid="this.setCustomValidity('')"

我发现的最简单、最干净的方法是使用数据属性来存储您的自定义错误。测试节点的有效性，并使用一些自定义 html 处理错误。

le JavaScript

if(node.validity.patternMismatch)
        {
            message = node.dataset.patternError;
        }

还有一些超级HTML5

<input type="text" id="city" name="city" data-pattern-error="Please use only letters for your city." pattern="[A-z ']*" required>

下面是一些用于显示自定义错误消息的代码：

<input type="text" id="username" required placeholder="Enter Name"
       oninvalid="this.setCustomValidity('Enter User Name Here')"
       oninput="this.setCustomValidity('')"/>

这部分很重要，因为它会在用户输入新数据时隐藏错误消息：

oninput="setCustomValidity('')"

注意：内联事件处理程序不需要该关键字，但您可能希望无论如何都使用它以保持一致性。this

试试这个，它更好，经过测试：

    function InvalidMsg(textbox) {
        if (textbox.value === '') {
            textbox.setCustomValidity('Required email address');
        } else if (textbox.validity.typeMismatch){
            textbox.setCustomValidity('please enter a valid email address');
        } else {
           textbox.setCustomValidity('');
        }

        return true;
    }

<form id="myform">
    <input id="email" 
           oninvalid="InvalidMsg(this);" 
           oninput="InvalidMsg(this);"
           name="email"  
           type="email" 
           required="required" />
    <input type="submit" />
</form>

演示：

http://jsfiddle.net/patelriki13/Sqq8e/

通过在正确的时间设置和取消设置，验证消息将完美运行。setCustomValidity

<input name="Username" required 
oninvalid="this.setCustomValidity('Username cannot be empty.')" 
onchange="this.setCustomValidity('')" type="text" />

我使用的 instead of which 更通用，并且当值在任何条件下更改时都会发生，即使通过 JavaScript 也是如此。onchangeoninput

我有一个更简单的仅限香草 js 的解决方案：

对于复选框：

document.getElementById("id").oninvalid = function () {
    this.setCustomValidity(this.checked ? '' : 'My message');
};

对于输入：

document.getElementById("id").oninvalid = function () {
    this.setCustomValidity(this.value ? '' : 'My message');
};

将 Salar 的答案改编为 JSX 和 React，我注意到 React Select 的行为并不像一个关于验证的字段。显然，需要几种解决方法来仅显示自定义消息并防止它在不方便的时间显示。<input/>

我在这里提出了一个问题，如果它有什么帮助的话。下面是一个带有工作示例的 CodeSandbox，其中最重要的代码在这里复制：

你好 .js

import React, { Component } from "react";
import SelectValid from "./SelectValid";

export default class Hello extends Component {
  render() {
    return (
      <form>
        <SelectValid placeholder="this one is optional" />
        <SelectValid placeholder="this one is required" required />
        <input
          required
          defaultValue="foo"
          onChange={e => e.target.setCustomValidity("")}
          onInvalid={e => e.target.setCustomValidity("foo")}
        />
        <button>button</button>
      </form>
    );
  }
}

选择有效 .js

import React, { Component } from "react";
import Select from "react-select";
import "react-select/dist/react-select.css";

export default class SelectValid extends Component {
  render() {
    this.required = !this.props.required
      ? false
      : this.state && this.state.value ? false : true;
    let inputProps = undefined;
    let onInputChange = undefined;
    if (this.props.required) {
      inputProps = {
        onInvalid: e => e.target.setCustomValidity(this.required ? "foo" : "")
      };
      onInputChange = value => {
        this.selectComponent.input.input.setCustomValidity(
          value
            ? ""
            : this.required
              ? "foo"
              : this.selectComponent.props.value ? "" : "foo"
        );
        return value;
      };
    }
    return (
      <Select
        onChange={value => {
          this.required = !this.props.required ? false : value ? false : true;
          let state = this && this.state ? this.state : { value: null };
          state.value = value;
          this.setState(state);
          if (this.props.onChange) {
            this.props.onChange();
          }
        }}
        value={this && this.state ? this.state.value : null}
        options={[{ label: "yes", value: 1 }, { label: "no", value: 0 }]}
        placeholder={this.props.placeholder}
        required={this.required}
        clearable
        searchable
        inputProps={inputProps}
        ref={input => (this.selectComponent = input)}
        onInputChange={onInputChange}
      />
    );
  }
}

好的，oninvalid 运行良好，但即使用户输入有效数据，它也会显示错误。所以我在下面用它来解决这个问题，希望它也对你有用，

oninvalid="this.setCustomValidity('Your custom message.')" onkeyup="setCustomValidity('')"

防止 Google Chrome 在输入每个符号时出现错误消息的解决方案：

<p>Click the 'Submit' button with empty input field and you will see the custom error message. Then put "-" sign in the same input field.</p>
<form method="post" action="#">
  <label for="text_number_1">Here you will see browser's error validation message on input:</label><br>
  <input id="test_number_1" type="number" min="0" required="true"
         oninput="this.setCustomValidity('')"
         oninvalid="this.setCustomValidity('This is my custom message.')"/>
  <input type="submit"/>
</form>

<form method="post" action="#">
  <p></p>
  <label for="text_number_1">Here you will see no error messages on input:</label><br>
  <input id="test_number_2" type="number" min="0" required="true"
         oninput="(function(e){e.setCustomValidity(''); return !e.validity.valid && e.setCustomValidity(' ')})(this)"
         oninvalid="this.setCustomValidity('This is my custom message.')"/>
  <input type="submit"/>
</form>

只需将“title”与字段放在一起即可轻松处理：

<input type="text" id="username" required title="This field can not be empty"  />

如果您的错误消息是一条，请尝试以下操作。

<input oninvalid="this.setCustomValidity('my error message')"
       oninput="this.setCustomValidity('')">  <!-- 👈 don't forget it. -->

要处理多个错误，请尝试以下操作

<input oninput="this.setCustomValidity('')">
<script>
inputElem.addEventListener("invalid", ()=>{
    if (inputElem.validity.patternMismatch) {
      return inputElem.setCustomValidity('my error message')
    }
    return inputElem.setCustomValidity('') // default message
})
</script>

例

您可以测试输入非法文件名或 valueMissing。

<form>
<input pattern="[^\\/:\x22*?<>|]+"
       placeholder="input file name"       
       oninput="this.setCustomValidity('')"
       required
>
  <input type="submit">
</form>

<script>
  const form = document.querySelector("form")

  const inputElem = document.querySelector(`input`)

  inputElem.addEventListener("invalid", ()=>{   
    if (inputElem.validity.patternMismatch) {
      return inputElem.setCustomValidity('Illegal Filename Characters \\/:\x22*?<>|')
    }
    return inputElem.setCustomValidity('') // return default message according inputElem.validity.{badInput, customError, tooLong, valueMissing ...}
  })

  form.onsubmit = () => {
    return false
  }
</script>

• ValidityState（有效性状态）

const username= document.querySelector('#username');
const submit=document.querySelector('#submit');

submit.addEventListener('click',()=>{
    if(username.validity.typeMismatch){
        username.setCustomValidity('Please enter User Name');
    }else{
        username.setCustomValidity('');
    }
if(pass.validity.typeMismatch){
        pass.setCustomValidity('Please enter Password');
    }else{
        pass.setCustomValidity('');
    }

})

对于完全自定义的检查逻辑：

$(document).ready(function() {

  $('#form').on('submit', function(e) {
    if ($('#customCheck').val() != 'apple') {
      $('#customCheck')[0].setCustomValidity('Custom error here! "apple" is the magic word');
      $('#customCheck')[0].reportValidity();
      e.preventDefault();
    }
  });

  $('#customCheck').on('input', function() {
    $('#customCheck')[0].setCustomValidity('');
  });


});

input {
  display: block;
  margin-top: 15px;
}

input[type="text"] {
  min-width: 250px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="form">
  <input type="text" placeholder="dafault check with 'required' TAG" required/>
  <input type="text" placeholder="custom check for word 'apple'" id="customCheck" />
  <input type="submit">
</form>