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

作者:代码拾荒时间:2026-10-22 09:50:26浏览:308

本文介绍在Web开发中,如何在表单提交前利用JavaScript对用户输入的年龄(数字)和邮箱地址进行有效性校验。通过结合String.replace方法去除空格,并使用isNaN判断数值合法性,以及正则表达式验证邮箱格式,确保数据提交前的准确性与规范性。

表单校验的必要性

在Web开发中,用户提交表单时的数据类型和内容往往存在较大不确定性,用户可能并未完全理解设计者的意图。因此,在表单提交前进行数据校验是必要的环节。本文将简要分享几种常用的校验方法,作为技术探讨,欢迎指正。

JavaScript校验逻辑实现


<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>

String.replace方法详解

JavaScript中的String.replace函数主要用于将源字符串中匹配的部分替换为指定内容,并返回替换后的新字符串。其基本用法如下所述。

String对象的replace方法具有以下函数签名:

replace(match, replacement)

该方法的功能是将源字符串中匹配match的部分替换为replacement,并返回替换后的字符串。

通常情况下,第一个参数match是一个正则表达式。例如:

replace(/n/g, "h") // 将源字符串中所有的字符'n'替换为'h'。

第二个参数replacement可以是字符串,该字符串中可以引用第一个参数正则表达式中的分组。例如:

replace(/(a){2,2}/g, "$1b") // 将源字符串中所有的'aa'替换为'ab'。

总结

总结

以上介绍了利用JavaScript实现表单提交前数字及邮箱校验的相关功能,希望能为读者提供帮助。如有任何疑问,欢迎留言交流,作者将及时回复。感谢大家对本网站的支持!

作者最新文章