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 相关文章推荐
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
JavaScript 获取事件对象的注意点
Jul 29 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
动态改变div的z-index属性的简单实例
Aug 08 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 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 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
Python读写文件方法总结
2015/06/09 Python
Python 常用string函数详解
2016/05/30 Python
Python实现视频下载功能
2017/03/14 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
学生爱国演讲稿
2014/01/14 职场文书
年度考核自我评价
2014/01/25 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
六查六看自查报告
2014/10/14 职场文书
模范班主任事迹材料
2014/12/17 职场文书
先进单位申报材料
2014/12/25 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
戒赌保证书
2015/05/11 职场文书
民事答辩状范本
2015/05/21 职场文书
校园广播站开场白
2015/06/01 职场文书
2015选调生工作总结
2015/07/24 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
一文解答什么是MySQL的回表
2022/08/05 MySQL