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 相关文章推荐
取得传值的函数
Oct 27 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
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将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
javascript引用对象的方法
2007/01/11 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
经理秘书岗位职责
2013/11/14 职场文书
旷课检讨书2000字
2014/01/14 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
施工安全责任书范本
2014/07/24 职场文书
工作说明书格式
2014/07/29 职场文书
干部作风建设工作总结
2014/10/29 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
教育实习指导教师评语
2014/12/31 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
西岭雪山导游词
2015/02/06 职场文书
2015国庆节宣传语
2015/07/14 职场文书