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计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
Element Input输入框的使用方法
Jul 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
php遍历目录viewDir函数
2009/12/15 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
php swoft框架实例用法
2020/12/22 PHP
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
对Python中内置异常层次结构详解
2018/10/18 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
幼儿园教师演讲稿
2014/05/06 职场文书
公司周年庆典致辞
2015/07/30 职场文书
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏