本文介绍如何在JavaScript中利用HTML的Span标签实现友好的表单验证提示，避免使用阻塞性的Alert弹窗。通过封装validate_Length函数，可校验输入域的最小与最大长度，并针对邮政编码等特定格式进行位数与数字合法性检查，提升用户体验。
JavaScript 表单验证基础
在数据提交至服务器之前，可以使用 JavaScript 对 HTML 表单内的输入数据进行前端验证。
使用 Span 标签替代 Alert 提示
那么，应当采用何种方式向用户展示验证结果？通常不建议使用 alert() 弹窗，因为其会阻断用户的操作视线。
可以在输入框后方添加一个 span 标签用于显示提示信息。
<input id="phone" name="phone" type="text" size="12" onBlur="validateNonEmptyFun(this,document.getElementById('phone_help'));" />
<span id="phone_help" class="help"></span>
function validate_Length(inputFiled,helpText)
{
//如果输入域内容是空，则在span标签内提醒
if(inputFiled.value.length==0)
{
if(helpText!=null)
helpText.innerHTML="文本框不能为空";
}
//如果输入域不空，则清空span标签内的内容
else if(helpText!=null)
helpText.innerHTML=""
}
</script>其中，helpText 参数代表传入的 span 对象引用。
使用 span 标签进行非空提醒，不会像 alert 弹窗那样遮挡用户视线，体验更为平滑。
输入长度范围验证实现
除了检查非空状态，还需要处理输入内容的尺寸限制问题。
接下来演示如何验证数据的长度范围。
<input id="phone" name="phone" type="text" size="12" onBlur="validate_Length(1,32,this,document.getElementById('phone_help'));" />
<span id="phone_help" class="help"></span>此时函数参数扩展为四个，前两个分别指定文本的最小长度和最大长度。
function validate_Length(minLegth,maxlength,inputFiled,helpText)
{
if(inputFiled.value.length<minLegth||inputFiled.value.length>maxlength)
{
if(helpText!=null)
{
helpText.innerHTML="请输入长度为"+minLenght+"到"+maxLength+"的文本";
return false;
}
}
else if(helpText!=null)
{
helpText.innerHTML=""
return true;
}
}特定格式验证：以邮政编码为例
最后，以验证邮政编码为例进行说明。
function validate_ZipCode(inputFiled,helpText)
{
if(inputFiled.value.length!=5)
{
if(helpText!=null)
helpText.innerHTML="邮政编码长度必须为5位";
return false;
}
else if(isNaN(inputFiled.value))
{
if(helpText!=null)
helpText.innerHTML="邮政编码必须为数字";
return false;
}
else if(helpText!=null)
{
helpText.innerHTML=""
return true;
}
}