Javascript的表单验证-提交表单


Posted in Javascript onMarch 18, 2016

推荐阅读:Javascript的表单验证长度

Javascript的表单验证-初识正则表达式

Javascript的表单验证-揭开正则表达式的面纱

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

坏数据不该抵达服务器:提交表单时的验证

表单域对象里有个form特性,它使用数组表示了整份表单的域

假如这里只有一个简单的信息文本框和一个邮政编码框,还有一个提交按钮

<form>
<input id="message" name="message" type="text" size="12" onBlur="validate_Length(1,32,this,document.getElementById('message_help'));" />
<message_help" class="help"></span>
<input id="ZipCode" name="phone" type="text" size="5" onBlur="validate_ZipCode(this,document.getElementById('ZipCode_help'));" />
<span id="ZipCode_help" class="help"></span>
<input type="button" value="Order Banner" onClick="placeOrder(this.form);"/>
</form>
<script language="javascript" type="text/javascript">
//文本长度验证
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;
}
}
function placeOrder(form)
{
if(validateNonEmpty(1,32,form["phone"],form["phone_help"])&&validate_ZipCode(form["ZipCode"],form["ZipCode_help"]))
{
form.submit();
}
else{
alert("您填写的表单数据至少有一项不合法");
}
}
</script>

总结:只需要调用相应的验证函数,得到返回值,便可在最后提交表单的时候完成最后的数据过滤

在实际应用中,往往需要对数据的长度,非空,非法字符,格式,大小定等等做验证,这里不一一介绍,重在领会。

好了,有关Javascript的表单验证-提交表单的相关知识,小编就给大家介绍到这里,希望对大家有所帮助!

Javascript 相关文章推荐
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
使用Javascript简单计算器
Nov 17 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 Javascript
Javascript的表单与验证-非空验证
Mar 18 #Javascript
悬浮广告方法日常收集整理
Mar 18 #Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 #Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 #Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 #Javascript
javascript 继承学习心得总结
Mar 17 #Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 #Javascript
You might like
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
Python yield 使用方法浅析
2017/05/20 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
python 自定义装饰器实例详解
2019/07/20 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
Python 下载及安装详细步骤
2019/11/04 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
Python如何执行系统命令
2020/09/23 Python
python中remove函数的踩坑记录
2021/01/04 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
班会关于环保演讲稿
2013/12/29 职场文书
精彩的英文自荐信
2014/01/30 职场文书
新年联欢会主持词
2014/03/27 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
师德师风自我评价范文
2014/09/11 职场文书
工作总结与自我评价
2014/09/18 职场文书
后勤工作个人总结
2015/02/28 职场文书
赤壁观后感(2)
2015/06/15 职场文书
爱国之歌(8首)
2019/09/29 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
MySQL数据库 任意ip连接方法
2022/05/20 MySQL