Javascript在客户端验证表单信息（包括用户名不为空，密码的长度，电话号码必须为数字，email的不同格式等）

最新推荐文章于 2021-10-19 16:59:29 发布
最新推荐文章于 2021-10-19 16:59:29 发布
阅读量5.7k 收藏 3
点赞数
分类专栏： Javascript 文章标签： email 电话 javascript 正则表达式 class button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wdh226/article/details/5503379
版权

说明：client_validate.js正是下面使用trim（）方法的js文件

 

 

add_user.jsp文件源码如下：

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
  <title>添加用户</title>
  <link rel="stylesheet" href="../style/drp.css">
  <script src="../script/client_validate.js"></script>
  <script type="text/javascript">
 function goBack() {
  window.self.location="user_maint.html"
 }
 
 function addUser() {
 
     userIdField = document.getElementById("userId");
     //验证用户代码不能为空
        if(trim(userIdField.value) == ""){
            alert("用户代码不能为空！");
            userIdField.focus();
            return;
        }
       
        /*
        //验证用户代码不能少于4个字符
        if(trim(userIdField.value).length < 4){
            alert("用户代码不能少于4个字符");
            userIdField.focus();
            return;
        }
        */
       
        //验证用户代码第一个字符必须是字母
        /*
        if(!(trim(userIdField.value).charAt(0) >= 'a' && trim(userIdField.value).charAt(0) <= 'z')){
            alert("用户代码第一个字符必须为字母！");
            userIdField.focus();
            return;
        }
        */
       
        //使用正则表达式验证用户代码第一个字符必须是字母
        var re = new RegExp(/^[a-zA-Z]/);
        if(!re.test(trim(userIdField.value))){
            alert("用户代码第一个字符必须为字母！");
            userIdField.focus();
            return;
        }
       
        //使用正则表达式验证用户代码输入字符必须为字母和数字，且字符个数为4~6位
        re.compile(/^[a-zA-Z0-9]{4,6}$/);
        if(!re.test(trim(userIdField.value))){
            alert("输入字符必须为字母和数字，且字符个数为4~6位！");
            userIdField.focus();
            return;
        }
       
        //判断用户名称不能为空
        var userNameField = document.getElementById("userName");
        if(trim(userNameField.value) == ""){
            alert("用户名称不能为空!");
            userNameField.focus();
            return;
        }
       
        //判断密码至少为6位
        var passWordField = document.getElementById("password");
        if(trim(passWordField.value).length < 6){
            alert("密码至少为6位！");
            passWordField.focus();
            return;
        }
       
        //如果电话输入了，则判断输入的电话号码必须为数字
        /*
        var contactTelField = document.getElementById("contactTel");
        if(trim(contactTelField.value).length != 0){
            var contactTelValue=trim(contactTelField.value);
            for(var i=0;i<contactTelValue.length;i++){
               if(!(contactTelValue.charAt(i) >= '0' && contactTelValue.charAt(i) <= '9')){
                   alert("输入的电话号码必须为数字");
                   contactTelField.focus();
                   return;
               }
            }
        }
        */
       
        //使用正则表达式判断如果电话输入了，则输入的电话号码必须为数字
        var contactTelField = document.getElementById("contactTel");
        var tel = new RegExp(//d/);
        if(trim(contactTelField.value).length != 0){
            var contactTelValue=trim(contactTelField.value);
            for(var i=0;i<contactTelValue.length;i++){
                if(!tel.test(contactTelValue.charAt(i))){
                   alert("输入的电话号码必须为数字");
                   contactTelField.focus();
                   return;
                }
            }
        }
       
        //第一种方法验证email：电子邮件地址必须包括 @
        /*
        var emailField = document.getElementById("email");
        if(trim(emailField.value) !="" ){
            if(emailField.value.search("@")==-1){
             alert("电子邮件地址必须包括 @");
             emailField.focus();
             return;
         }
        }
        */
       
       /*
        //第二种方法验证email：使用正则表达式验证email必须包括 ( @ 和 . )
        var emailField = document.getElementById("email");
        var emailPat=/^(.+)@(.+)$/;
        if(trim(emailField.value).length != 0){
            var emailmatch = emailField.value.match(emailPat);
            if(emailmatch == null){
                alert("电子邮件地址必须包括 ( @ 和 . )");
                emailField.focus();
                return;
            }
        }
        */
       
        //第三种方法验证email：使用正则表达式验证邮箱：email格式为***@***.***
        var emailField = document.getElementById("email");
        var emailPat=/^([/w-/.]+)@((/[[0-9]{1,3}/.[0-9]{1,3}/.[0-9]{1,3}/.)|(([/w-]+/.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(/]?)$/
        if(trim(emailField.value).length != 0){
            var emailmatch = emailField.value.match(emailPat);
            if(emailmatch == null){
                alert("电子邮件地址必须为***@***.***格式");
                emailField.focus();
                return;
            }
        }
       
       
 }
</script>
 </head>

 <body class="body1">
  <form name="userForm" target="_self" id="userForm">
   <div align="center">
    <table width="95%" border="0" cellspacing="2" cellpadding="2">
     <tr>
      <td>&nbsp;
       
      </td>
     </tr>
    </table>
    <table width="95%" border="0" cellspacing="0" cellpadding="0"
     height="25">
     <tr>
      <td width="522" class="p1" height="25" nowrap>
       <img src="../images/mark_arrow_03.gif" width="14" height="14">
       &nbsp;
       <b>系统管理&gt;&gt;用户维护&gt;&gt;添加</b>
      </td>
     </tr>
    </table>
    <hr width="97%" align="center" size=0>
    <table width="95%" border="0" cellpadding="0" cellspacing="0">
     <tr>
      <td width="22%" height="29">
       <div align="right">
        <font color="#FF0000">*</font>用户代码:&nbsp;
       </div>
      </td>
      <td width="78%">
       <input name="userId" type="text" class="text1" id="userId"
        size="10" maxlength="10">
      </td>
     </tr>
     <tr>
      <td height="26">
       <div align="right">
        <font color="#FF0000">*</font>用户名称:&nbsp;
       </div>
      </td>
      <td>
       <input name="userName" type="text" class="text1" id="userName"
        size="20" maxlength="20">
      </td>
     </tr>
     <tr>
      <td height="26">
       <div align="right">
        <font color="#FF0000">*</font>密码:&nbsp;
       </div>
      </td>
      <td>
       <label>
        <input name="password" type="password" class="text1"
         id="password" size="20" maxlength="20">
       </label>
      </td>
     </tr>
     <tr>
      <td height="26">
       <div align="right">
        联系电话:&nbsp;
       </div>
      </td>
      <td>
       <input name="contactTel" type="text" class="text1"
        id="contactTel" size="20" maxlength="20">
      </td>
     </tr>
     <tr>
      <td height="26">
       <div align="right">
        email:&nbsp;
       </div>
      </td>
      <td>
       <input name="email" type="text" class="text1" id="email"
        size="20" maxlength="20">
      </td>
     </tr>
    </table>
    <hr width="97%" align="center" size=0>
    <div align="center">
     <input name="btnAdd" class="button1" type="button" id="btnAdd"
      value="添加" onClick="addUser()">
     &nbsp;&nbsp;&nbsp;&nbsp;
     <input name="btnBack" class="button1" type="button" id="btnBack"
      value="返回" onClick="goBack()" />
    </div>
   </div>
  </form>
 </body>
</html>

wdh226
关注
专栏目录
_JavaScript表单验证实例 js 前端 例子
02-06
_JavaScript表单验证实例 js 前端 例子_JavaScript表单验证实例 js 前端 例子
JavaScript表单验证
冰蛙
09-15 367
<head> <meta charset="UTF-8"> <title>js表单验证</title> </head> <body background="img/2.jpg"> <form name="frm" onsubmit="return yanzheng()"> ...
用户输入验证邮箱，通过javascript代码验证邮箱格式是否正确 //邮箱验证
FIGHTING的专栏
06-10 5529
//邮箱验证      function funmail(){                  var mail=document.form1.qq.value;                  var re=/^[\w-]+(\.[\w]+)*@([\w-]+\.)+[a-zA-z]{2,7}$/;                   if(mail==""){       
JavaScript 正则表达式表单验证简单实例
哈哈hyc的博客
07-30 522
大家在前端开发过程中总会遇到一些表单，难免会碰到一些正则表达式，以下为一些简单表单实例的正则表达式，仅供参考，具体可以自行修改： /*是否带有小数*/ function isDecimal(strValue ) { var objRegExp= /^\d+\.\d+$/; return objRegExp.test(strValue); } /*校验是否中...
JS 验证密码 不能为空，必须含有数字、字母、特殊字符,长度在8-12位
Sara的专栏
04-11 1万+
checkpassword = function(v){ var numasc = 0; var charasc = 0; var otherasc = 0; if(0==v.length){ return "密码不能为空"; }else if(v.length12){ retu
javaScript 简单验证代码（用户名，密码，邮箱)
11-30
在这个示例中，我们看到的是一个简单的JavaScript验证代码，用于检查用户在注册表单中输入的用户名、密码和电子邮件是否符合特定的格式要求。下面将详细解释这段代码中的各个功能和知识点： 1. **函数定义**： - `...
JS表单验证会员信息填写代码
04-07
在会员表单中，可能需要验证的字段包括用户名、密码、手机号码、身份证号等。每种字段都有特定的验证规则，例如，密码通常要求包含大小写字母、数字和特殊字符，手机号码需要符合国家或地区的电话格式，身份证号则需...
详解JavaScript中的表单验证
10-24
在上述示例中，`Zip`字段的验证包括了三个条件：检查是否为空，是否为数字，以及长度是否为5位。如果不符合这些条件，JavaScript同样会给出错误提示。 除了上述的基本和格式验证，JavaScript还可以进行更复杂的验证...
注册页面的表单信息中包含用户名，密码，邮箱发送到控制台，并且正则验证
最新发布
07-14
=.*[a-zA-Z]).{8,}$`表示密码必须至少包含一个数字、一个小写字母、一个大写字母，并且长度至少为8个字符。 当用户在注册页面填写信息并点击"注册"按钮后，表单数据会以POST请求的形式发送到服务器端的`/register`...
isFormValid:Javascript 表单验证
06-18
例如，要求用户名必须包含至少6个字符且不能超过15个字符，可以这样写： ```html |minLength[6]|maxLength[15]" /> ``` ### 提示和错误消息 当用户输入不符合验证规则时，`isFormValid` 可以显示提示或错误消息。...
根据需要自主增加表单个数
04-15
报名时候不确定报名人数，姓名表单默认只有一个，可自主添加表单。更新版，上一个下载人太多，分高了，重新优化了一下再发布一次
javascript - 用户注册页面（表单验证）
zyljjf的博客
09-26 1万+
javascript - 用户注册页面java <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> ![var names = \["tom","jack","lily","韩梅梅"\]; fu
JS验证用户名必须以字母(不区分大小写)、数字、下划线(_)随意组合的字符
上海SEO优化博客
03-11 1万+
写法一： function checkuid(){ var obj = document.getElementById("uid"); var reg = new RegExp(/^\w+$/); //必须以字母开头，且以字母、数字、下划线(_)随意组合的正则式为： ^[a-zA-Z]{1}\w*$ if(!reg.test(obj.value)) alert("用户名格式错误!")
element ui rules 表单校验(手机号必须为数字,规定长度)
七月❤的博客
10-19 6860
data() { const validateNum = (rule, value, callback) => { debugger const phone= /^[0-9]*$/ // console.log(phone.test(value)) // console.log(value) if (!(phone.test(value)) && value) { callback(new Erro..
js 验证用户名和密码是否为空
02-02 2万+
My JSP 'userValidate.jsp' starting page function checkUserName(obj){ var username = obj; var checkUserNameResult = document.getElementById("checkUserNameResult"
HTML学习笔记 05 - 表单及表单元素
yups
04-03 705
一、表单 表单是网页制作中非常重要的内容，是Web开发中实现输入功能的。用户通过表单可以在网页中录入数据、编辑数据。例如登录、注册、修改密码、编辑资料等。在HTML当中，表单使用标签来定义。标签包含所有的表单元素，并且会告诉浏览器表达中的数据会提交到哪里，以及使用什么方式发送。 <body> <form action="success.html" method="post" ...
js实现登录用户名和密码只能是数字或字母
ld513508088的专栏
07-06 1万+
function clearText(){  document.getElementById("userName").value="";  document.getElementById("password").value="";  document.getElementById("userName").focus(); } function tsubmit(){  var myFor
vue+element 学习笔记 form表单验证之input数字必输（只能是数字）校验问题
热门推荐
changjiufu的博客
09-06 4万+
序言 在开发项目的过程中，表单需要设置某些字段输入的值必须是数字，且是必输字段，我使用了element提供的方法v-model.number，但是出现了一点问题。具体见图： 用了v-model.nuber以后： 看到了图以后很显然意见，他虽然完成了必输字段需要时数字这个需求，但是他还是可以输入文字。于是采用了另一种办法： 具体用法看代码： &lt;el-input v-mode...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值