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 相关文章推荐
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
jQuery中extend函数详解
Feb 13 Javascript
javascript实现表单验证
Jan 29 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
vue开发拖拽进度条滑动组件
Sep 21 Javascript
Vue前端项目部署IIS的实现
Jan 06 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
Python版实现微信公众号扫码登陆
May 28 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
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
Open and Print a Word Document
2007/06/15 Javascript
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
js实现单张图片平移切换效果
2017/10/11 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
Python编写登陆接口的方法
2017/07/10 Python
python语言中with as的用法使用详解
2018/02/23 Python
python中的二维列表实例详解
2018/06/19 Python
python操作yaml说明
2020/04/08 Python
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
幼儿园教师培训制度
2014/01/16 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
高中生操行评语
2014/04/25 职场文书
会议室标语
2014/06/21 职场文书
电子工程求职信
2014/07/17 职场文书
2015年国庆节寄语
2015/08/17 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书