JS实现提交表单前的数字及邮箱校检功能


Posted in Javascript onNovember 13, 2017

个人觉得一个工程中让用户提交表单时,用户提交的数据类型及内容不确定度都很大,用户不一定会完全理解设计者意思。所以提交表单前的校检是必须的,这里简单分享几个校检方法,本人新手,还请多多指教。

<script type="text/javascript">
 function toVaild(){
var age = document.getElementById("age").value;

var email = document.getElementById("email").value;

if(age==null||age.replace(/(^\s*)|(\s*$)/g, "")==""||age==undefined){ 


 //JavaScript String.replace函数 这里用来去掉空格等于trim

  return false;d

}else{


if(isNaN(age)||age<0){ 

  //如果age是特殊的非数字值NaN(或者能被转换为这样的值),返回的值就是true。如果age是其他值,则返回false。



alert("请输入正确的年龄(数字)")



document.getElementById("age").focus();



return false;
  
}

}

if(email==null||email.replace(/(^\s*)|(\s*$)/g, "")==""||email==undefined){ 

}else{


var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; //匹配邮箱



isok= reg.test(email);


if(!isok){



alert("邮箱格式不正确,请重新输入!");



document.getElementById("email").focus();



return false;


}

}
}
 return true;
</script>
<form action="${pageContext.request.contextPath }/updateinfo" onsubmit="return toVaild()" >
<center>
<input type="text" id="age" placeholder="年龄">
<input id="email" placeholder="email" >
<button type="submit" >保存修改</button> </center>
</form>

JavaScript String.replace函数作用是将源自符串中的match替换为replacement并返回替换后的字符串,使用介绍如下:

js String的replace函数的函数签名如下:

replace(match/* 字符串OR正则表达式 */, replacement/* 字符串OR函数 */)

作用是将源自符串中的match替换为replacement并返回替换后的字符串。

所以第一参数通常是一个正则表达式,举例如下:

replace(/n/g, "h") // 将源自符串中所有的n替换为h。

第二参数可以是一个字符串,该字符串中可以包含第一参数正则表达式的分组,举例如下:

replace(/(a){2,2}/g, "$1b") // 将源自符串中所有的aa替换为ab。

总结

以上所述是小编给大家介绍的JS实现提交表单前的数字及邮箱校检功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
5个javascript的数字格式化函数分享
Dec 07 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
JavaScript仿京东轮播图效果
Feb 25 Javascript
vue 挂载路由到头部导航的方法
Nov 13 #Javascript
详解Vuex管理登录状态
Nov 13 #Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 #Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 #Javascript
js设置随机切换背景图片的简单实例
Nov 12 #Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 #Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 #Javascript
You might like
FCKeditor添加自定义按钮
2008/03/27 PHP
swfupload 多文件上传实现代码
2008/08/27 PHP
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
Python修改列表值问题解决方案
2020/03/06 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
Django实现简单的分页功能
2021/02/22 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
文秘专业应届生求职信范文
2013/11/14 职场文书
机电工程学生自荐信范文
2013/12/07 职场文书
鲜花方阵解说词
2014/02/13 职场文书
党员志愿者活动方案
2014/08/28 职场文书
个人求职自荐信范文
2015/03/06 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis