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 相关文章推荐
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
Javascript 模式实例 观察者模式
Oct 24 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
微信小程序 检查接口状态实例详解
Jun 23 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 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的锁和并发
2016/01/22 PHP
php自动载入类用法实例分析
2016/06/24 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
Python 可爱的大小写
2008/09/06 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
详解pandas赋值失败问题解决
2020/11/29 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
联强国际笔试题面试题
2013/07/10 面试题
五好党支部事迹材料
2014/02/06 职场文书
人事专员的岗位职责
2014/03/01 职场文书
副总经理岗位职责
2015/02/02 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
股东出资协议书
2016/03/21 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python