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 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
学习vue.js条件渲染
Dec 03 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
vue实现记事本功能
Jun 26 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 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
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
php检测文本的编码
2015/07/26 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python实现备份文件实例
2014/09/16 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
django自带调试服务器的使用详解
2019/08/29 Python
Python for循环及基础用法详解
2019/11/08 Python
python3.8下载及安装步骤详解
2020/01/15 Python
Python Django搭建网站流程图解
2020/06/13 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
财务经理的岗位职责
2013/12/17 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
升职演讲稿范文
2014/05/23 职场文书
小兵张嘎观后感
2015/06/03 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书