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 相关文章推荐
dojo随手记 gird组件引用
Feb 24 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
浅析Bootstrap验证控件的使用
Jun 23 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
使用jquery如何获取时间
Oct 13 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
JavaScript分页组件使用方法详解
Jul 26 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 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
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
Python采用raw_input读取输入值的方法
2014/08/18 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
浅谈python中的占位符
2017/11/09 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
财务学生的职业生涯发展
2014/02/11 职场文书
座谈会主持词
2014/03/20 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
四风问题查摆剖析材料
2014/10/11 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
通讯稿格式及范文
2015/07/22 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
汶川大地震感悟
2015/08/10 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
Python Pandas 删除列操作
2022/03/16 Python
python turtle绘图
2022/05/04 Python