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可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
vue 实现click同时传入事件对象和自定义参数
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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
php实现ping
2006/10/09 PHP
第四节--构造函数和析构函数
2006/11/16 PHP
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
php查询内存信息操作示例
2019/05/09 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
Python 2与Python 3版本和编码的对比
2017/02/14 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
Python 如何创建一个线程池
2020/07/28 Python
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
成绩单评语
2015/01/04 职场文书
大二学年个人总结
2015/03/03 职场文书
高一军训口号
2015/12/25 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫