Javascript的表单验证长度

前端技术 2023/09/09 JavaScript

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

该采用什么样的方式对用户作出提醒呢？你一定不想用alert()提示框

在输入域后加一个sqan标签

<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;
}
}

本文地址：https://www.stayed.cn/item/24311

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案