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基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
js对象的复制继承实例
Jan 10 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
老生常谈的跨域处理
Jan 11 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 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
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
Yii中表单用法实例详解
2016/01/05 PHP
jQuery 获取对象 定位子对象
2010/05/31 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
React中的render何时执行过程
2018/04/13 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
vue中的router-view组件的使用教程
2018/10/23 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
python基础教程项目四之新闻聚合
2018/04/02 Python
python pygame实现2048游戏
2018/11/20 Python
基于python实现名片管理系统
2018/11/30 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
python中的global关键字的使用方法
2019/08/20 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
基于python实现查询ip地址来源
2020/06/02 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
人力资源职位说明书
2014/07/29 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
员工手册编写范本
2015/05/14 职场文书
统招统分证明
2015/06/23 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
html5调用摄像头截图功能
2022/01/18 Javascript