HTML输入数字自定义验证消息答案

【问题标题】：HTML input number custom validation messageHTML输入数字自定义验证消息
【发布时间】：2014-06-16 08:34:26
【问题描述】：

我偶然发现了一个问题，但我找不到合适的解决方案。

<input type="number" class="span8" onchange="this.setCustomValidity('')" required oninvalid="this.setCustomValidity('@Resources.Employee.EmploymentTimeRequired')" data-name="EmploymentTime" min="0" max="40" />/40<

我有以下代码，我想获得两条不同的验证消息：一个字段为空时，第二个如果输入的数字超过最大值或最小值。现在我只有一条验证消息。非常感谢您的帮助。

【问题讨论】：

标签： html validation input asp.net-mvc-5

【解决方案1】：

这应该可以 HTML代码

<input type="number" class="span8" onchange="validate(this.id)" id="input1"/>

JAVASCRIPT 代码

function validate(id){
 var  inputval = document.getElementById(id).value;
 var length = inputval.length;
 if(length==0){
 alert("empty");
 }else if(length<MIN){
  //MIN is your minimum number of charecter
  alert("minimum " + MIN + " charecter are required ");
 }else if(length>MAX){
   //MAX is your maximum number of charecter
  alert("maximum " + MAX + " charecter are required ");
 }

}

编辑：在 input 标签宽度 id 属性之后添加 span 标签
现在 HTML 将是

<input type="number" class="span8" onchange="validate(this.id)" id="input1"/><span id="errorinput1"></span>

和 JAVASCRIPT 将是

function validate(id){
var  inputval = document.getElementById(id).value;
var length = inputval.length;
var error = document.getElementById("errorinput1");
if(length==0){
error.innerHTML="EMPTY";
}else if(length<MIN){
//MIN is your minimum number of charecter
error.innerHTML="minimum " + MIN + " charecter are required ";
}else if(length>MAX){
 //MAX is your maximum number of charecter
 error.innerHTML="maximum " + MAX + " charecter are required ");
}

}

【讨论】：