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继承机制的设计思想分享
Aug 28 Javascript
javascript操作referer详细解析
Mar 10 Javascript
js动态切换图片的方法
Jan 20 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
js数组实现权重概率分配
Sep 12 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
微信小程序聊天功能的示例代码
Jan 13 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 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下统计用户在线时间的一种尝试
2010/08/26 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
php中hashtable实现示例分享
2014/02/13 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
js面向对象编程总结
2017/02/16 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
用Python写一个自动木马程序
2019/09/17 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
国际书籍零售商:Wordery
2017/11/01 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
专升本自我鉴定
2013/10/10 职场文书
计算机专业职业生涯规划范文
2014/01/19 职场文书
经典团队口号
2014/06/06 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
抗洪救灾标语
2014/10/08 职场文书
解除同居协议书
2015/01/29 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
就业推荐表院系意见
2015/06/05 职场文书