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 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
JS定义回车事件(实现代码)
Jul 08 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
vue内置指令详解
Apr 03 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 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数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
js 处理URL实用技巧
2010/11/23 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
Python如何给函数库增加日志功能
2020/08/04 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
会计专业的自荐信
2013/12/12 职场文书
标准毕业生自荐信
2014/06/24 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
离婚协议书格式
2014/11/21 职场文书
关于幸福的感言
2015/08/03 职场文书
Python基础之数据结构详解
2021/04/28 Python
利用Python+OpenCV三步去除水印
2021/05/28 Python