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本身的局限性 别让javascript做太多事
Mar 23 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
微信小程序按钮点击动画效果的实现
Sep 04 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
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
解析argc argv在php中的应用
2013/06/24 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
php随机抽奖实例分析
2015/03/04 PHP
php获取错误信息的方法
2015/07/17 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
vue-router相关基础知识及工作原理
2018/03/16 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
解读Python中degrees()方法的使用
2015/05/18 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
python开启debug模式的方法
2019/06/27 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
管理失职检讨书
2014/02/12 职场文书
学习两会精神心得范文
2014/03/17 职场文书
质量管理标语
2014/06/12 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书