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 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
javascript new后的constructor属性
Aug 05 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
功能强大的Bootstrap使用手册(一)
Aug 02 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
vue项目中实现缓存的最佳方案详解
Jul 11 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中CI操作多个数据库的代码
2012/07/05 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
使用python实现画AR模型时序图
2019/11/20 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
Java里面有没有全局变量?为什么?
2015/02/06 面试题
母亲80寿诞答谢词
2014/01/16 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书