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 select标签操作代码段
May 16 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
小程序的上传文件接口的注意要点解析
Sep 17 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 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代码
2008/09/10 PHP
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
js实现网页随机验证码
2020/10/19 Javascript
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
python实现猜数字游戏
2020/03/25 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
德国旅游网站:weg.de
2018/06/03 全球购物
本科生学习总结的自我评价
2013/10/02 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
百年校庆节目主持词
2014/03/27 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
销售督导岗位职责
2015/04/10 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫