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 相关文章推荐
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
layer.prompt输入层的例子
Sep 24 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 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
PHP中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
jQuery事件用法详解
2016/10/06 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
JS解析url查询参数的简单代码
2017/08/06 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
原生js实现购物车
2020/09/23 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
python超简单解决约瑟夫环问题
2015/05/12 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
Python装饰器用法示例小结
2018/02/11 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
Python实现搜索算法的实例代码
2020/01/02 Python
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
市场部规章制度
2014/01/24 职场文书
颁奖典礼主持词
2014/03/25 职场文书
医院标语大全
2014/06/23 职场文书
电话客服工作职责
2014/07/27 职场文书
质量负责人岗位职责
2015/02/15 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技