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 从if else 到 switch case 再到抽象
Jul 17 Javascript
html中table数据排序的js代码
Aug 09 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
vue源码中的检测方法的实现
Sep 26 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
对盗链说再见...
2006/10/09 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
基于jQuery的获取标签名的代码
2012/07/16 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
Python常用的爬虫技巧总结
2016/03/28 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
Python通过future处理并发问题
2017/10/17 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
Python实现网站表单提交和模板
2019/01/15 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
用python写PDF转换器的实现
2020/10/29 Python
python xlsxwriter模块的使用
2020/12/24 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
几道Web/Ajax的面试题
2016/11/05 面试题
招聘专员岗位职责
2014/03/07 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
拖欠货款起诉状
2015/05/20 职场文书
指导老师鉴定意见
2015/06/05 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书