JS实现提交表单前的数字及邮箱校检功能

个人觉得一个工程中让用户提交表单时，用户提交的数据类型及内容不确定度都很大，用户不一定会完全理解设计者意思。所以提交表单前的校检是必须的，这里简单分享几个校检方法，本人新手，还请多多指教。

<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实现提交表单前的数字及邮箱校检功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • angularjs $http实现form表单提交示例

    需求:请求第三方后台接口返回一段html字符串如下,由前端去实现form表单的POST提交, 说明:form表单submit()实现自动提交input标签hidden,注意script代码中的document.redirect.submit(); <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head

  • AngularJS模仿Form表单提交的实现代码

    废话不多说了,直接给大家贴代码了. $http({ url: "http://localhost:10086/yuanxin/Conference/ImportExcelDataForBusRoute", method: 'Post', headers: { 'Content-Type': 'multipart/form-data' }, data: { BusRoute: file, ConferenceID: "1" }, transformRequest: f

  • js的form表单提交url传参数(包含+等特殊字符)的两种解决方法

    方法一:(伪装form表单提交) linkredwin = function(A,B,C,D,E,F,G){ var formredwin = document.createElement("form"); formredwin.method = 'POST'; document.body.appendChild(formredwin); formredwin.action = "http://www.A.com/A.wiki?A=" +encodeURI(A) +

  • 利用JavaScript阻止表单提交的两种方法

    在JavaScript中,阻止表单默认提交行为的方法有两种,分别是: (1) return false 示例代码 <form name="loginForm" action="login.aspx" method="post"> <button type="submit" value="Submit" id="submit">Submit</button&g

  • JS控制表单提交的方法

    本文实例讲述了JS控制表单提交的方法.分享给大家供大家参考.具体如下: <Script Language="JavaScript"> function autoSubmit(){ var form = document.forms[0]; var actionPath = "?mo=phone"; form.action = actionPath; form.submit(); return true; } </Script> 如果需要两个提

  • js实现表单提交后不重新刷新当前页面

    如何实现表单提交后不重新刷新当前页面 <form name='form1' id='form1' action='/xbcw/cw/xx_xx.action' method='post'> <input type="button" id="btnSubmit" name="btnSubmit" value="保存" onclick="addKp()" class="Button2

  • JS实现提交表单前的数字及邮箱校检功能

    个人觉得一个工程中让用户提交表单时,用户提交的数据类型及内容不确定度都很大,用户不一定会完全理解设计者意思.所以提交表单前的校检是必须的,这里简单分享几个校检方法,本人新手,还请多多指教. <script type="text/javascript"> function toVaild(){ var age = document.getElementById("age").value; var email = document.getElementByI

  • jquery.form.js异步提交表单详解

    本文实例为大家分享了jquery.form.js异步提交表单的具体代码,供大家参考,具体内容如下 引入脚本: <script type="text/javascript" src="/js/jquery.form.min.js"></script> <script src="/js/json2.js"></script> //前端代码: <form id="f1">

  • IE浏览器下JS脚本提交表单后，不能自动提示问题解决方法

    IE浏览器下JS脚本提交表单后，不能自动提示问题解决方法

    本文实例讲述了IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法.分享给大家供大家参考,具体如下: 经常我们用表单提交东西,在提交后,浏览器会自动记录你输入的东西,下次你再输入的时候,可以重新选择,但是如果你是用IE的话,这里有一个BUG, 其他浏览器没有这个问题.当然首先你得设置IE 浏览器选项是可以记录表单数据的,然后写一段代码来测试. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> &

  • js 回车提交表单两种实现方法

    1.JavaScript 方法: 复制代码 代码如下: [javascript] <script> document.onkeydown=function(event){ e = event ? event :(window.event ? window.event : null); if(e.keyCode==13){ //执行的方法 alert('回车检测到了'); } } </script> <script> document.onkeydown=function

  • JQuery通过Ajax提交表单并返回结果

    JQuery通过Ajax提交表单并返回结果

    如下: 1:非Ajax 前台: 对应后台: 2:JQuery之Ajax 在介绍使用JQuery提交表单前,我们需要首先引用jquery.form.js,它来自于http://www.malsup.com/jquery/form/,至此,我们需要引用的JS文件有: 功能要求:Ajax提交表单,在控制器HelloWorld4Controller中处理请求,并返回若干数据,数据格式为JSON. 首先,我们假设返回的JSON实体为: 复制代码 代码如下: public class LoginResult

  • 利用AjaxSubmit()方法实现Form提交表单后回调功能

    1.      背景 最近在工作中,需要实现网页端图片上传到FTP服务器的功能.上传文件是用Form表单提交数据的方法向后台传输文件流,在此遇到了一个问题:后台在处理完图片上传功能后,需要向前台回传是否上传成功的状态码.上传失败的错误信息和上传成功后的图片URL.但是,用普通Form表单提交的话,没有办法实现回调函数.后来在小伙伴的介绍下,发现可以用ajaxSubmit()方法来实现此功能. 2.      ajaxSubmit()方法简介 (1)ajaxSubmit()依赖 ajaxSubmi

  • 原生JS封装ajax 传json，str，excel文件上传提交表单(推荐)

    由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(uri, data, cb) { $.ajax({ url: uri, type: 'POST', dataType: 'json', data: data, }) .done(cb) .fail(function() { console.log("error"); }) .always(f

  • Jquery提交表单 Form.js官方插件介绍

    先说说常用的Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用. 1.最新JQuery框架软件包下载 jquery.js压缩包 jquery.js非压缩包 2.Form插件下载 form.js 3.Form插件的简单入门 第一步:先增加一个表单 代码: 复制代码 代码如下: <form id="myForm" action="comment.php" method="post"> Name: <inpu

  • js实现不提交表单获取单选按钮值的方法

    js实现不提交表单获取单选按钮值的方法

    本文实例讲述了js实现不提交表单获取单选按钮值的方法.分享给大家供大家参考.具体如下: 这是JS实现的特效,不提交表单获取相关的控件值.如本例所示,不提交表单即可获取单选按钮的值. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-alert-show-table-value-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

  • Django之提交表单与前后端交互的方法

    Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请求 GET 请求过程 前端通过ajax发起GET请求,json格式数据 var data = { "name": "test", "age": 1 }; $.ajax({ type: 'GET', url: /your/url/, data: dat

随机推荐