Javascript的表单验证长度


Posted in Javascript onMarch 16, 2016

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;
}
}
Javascript 相关文章推荐
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
ajax请求前端跨域问题原因及解决方案
Oct 16 Javascript
Uploadify上传文件方法
Mar 16 #Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 #Javascript
原生JS实现平滑回到顶部组件
Mar 16 #Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 #Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 #Javascript
JavaScript隐式类型转换
Mar 15 #Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 #Javascript
You might like
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
javascript中对对层的控制
2006/12/29 Javascript
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
vue实现分页组件
2020/06/16 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
Python中Continue语句的用法的举例详解
2015/05/14 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
简述数据库的设计过程
2015/06/22 面试题
Java程序员面试90题
2013/10/19 面试题
运动会解说词100字
2014/01/31 职场文书
企业领导对照检查材料
2014/08/20 职场文书
自信主题班会
2015/08/14 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
Golang表示枚举类型的详细讲解
2021/09/04 Golang