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 相关文章推荐
Jquery时间验证和转换工具小例子
Jul 01 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
js实现不重复导入的方法
Mar 02 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
JavaScript实现简单音乐播放器
Apr 17 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
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
农民C键的运用技巧
2020/03/04 星际争霸
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
laravel model 两表联查示例
2019/10/24 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
蔻驰美国官网:COACH美国
2016/08/18 全球购物
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
Java程序开发中如何应用线程
2016/03/03 面试题
学生自我鉴定
2013/12/18 职场文书
美德好少年主要事迹
2014/01/29 职场文书
大课间活动实施方案
2014/03/06 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
邀请函格式范文
2015/02/02 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书