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 图片上传预览-兼容标准
Jun 01 Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
Dom 结点创建 基础知识
Oct 01 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
Vue v-text指令简单使用方法示例
Sep 19 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
如何去掉文章里的 html 语法
2006/10/09 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
Python datetime时间格式化去掉前导0
2014/07/31 Python
使用python画社交网络图实例代码
2019/07/10 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
《数星星的孩子》教学反思
2014/04/11 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
民族精神月活动总结
2014/08/28 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
Go归并排序算法的实现方法
2022/04/06 Golang