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 相关文章推荐
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
JavaScript的Set数据结构详解
Feb 18 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
memcache一致性hash的php实现方法
2015/03/05 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
Python实现获取操作系统版本信息方法
2015/04/08 Python
Python中列表元素转为数字的方法分析
2016/06/14 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
就业自荐书
2013/12/05 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
Python基本的内置数据类型及使用方法
2022/04/13 Python