JavaScript表单验证

最新推荐文章于 2024-11-27 09:43:07 发布
转载 最新推荐文章于 2024-11-27 09:43:07 发布 · 135 阅读 · 2 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/sonder/p/8869901.html

本文介绍了一种表单验证的实现思路，包括如何获取表单元素的值、利用字符串方法和正则表达式进行数据验证，以及如何通过JavaScript事件处理进行实时反馈。

表单验证的实现思路

  1. 首先获取表单元素的值
  2. 根据业务规则，对获取的数据进行判断
  3. 但表单提示时，触发onsubmit事件，对获取的数据进行验证

验证方式

  1. String对象的属性和方法
  2. 正则表达式

String对象常用的属性和方法（与java的String对象的方法用法类似）

属性：

  1. length：返回字符串的长度（包括空格等）

方法：

  1. toLowerCase()：把字符串转化为小写
  2. toUpperCase：把字符串转化为大写
  3. char At(index)：返回在指定位置的字符
  4. indexOf(str,str)：查找某个指定的字符串在字符串中首次出现的位置
  5. substring(index1,index2)：返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符

文本框对象（常用的属性、方法和事件）

属性：

  1. id：设置或返回文本域的id
  2. value：设置或返回文本域的value属性的值

方法：

  1. blur()：从文本域中移开焦点
  2. focus()：在文本域中设置焦点，即获得鼠标光标
  3. select()：选取文本域中的内容

事件：

  1. onblur：失去焦点，当光标离开某个文本框时触发
  2. infocus：获得焦点，当光标进入某个文本框时触发
  3. onkeypress：某个键盘按键被按下并松开

正则表达式

  1. 正则表达式是对字符串操作的一种逻辑公式，就是用事件定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”
  2. 这个“规则字符串”用来表达对字符串的一种过滤逻辑
  3. RegExp对象是Regular Expression（正则表达式）的缩写，它是对字符串执行模式匹配的强大工具

正则表达式中常用的符号和用法

  • /.../：代表一个模式的开始和结束
  • ^：匹配字符串的开始
  • $：匹配字符串的结束
  • \s：任何空白字符
  • \S：任何非空白字符
  • \d：匹配一个数字字符，等价于[0-9]
  • \D：除了数字之外的任何字符，等价于[^0-9]
  • \w：匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
  • . ：除了换行符之外的任意字符

正则表达式的重复字符

  • {n}：匹配前一项n次
  • {n,}：匹配前一次n次，或者多次
  • {n,m}：匹配前一项至少n次，但是不能超过m次
  • *：匹配前一项0次或多次，等价于{0,}
  • +：匹配前一项1次或多次，等价于{1,}
  • ?：匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}

定义正则表达式

普通方法：

var reg=/表达式/附加参数

构造函数：

var reg=new RegExp("表达式"，“附加参数”)

RegExp对象的方法

  • exec：检索字符中是正则表达式的区配，返回找到的值，并确定其位置
  • test：检索字符串中指定的值，返回true或false

RegExp对象的属性

  • global：RegExp对象是否具有标志g
  • ignoreCase：RegExp对象是否具有标志i

String对象的方法

  • match：找到一个或多个正则表达式的匹配
  • search：检索与正则表达式相匹配的值
  • replace：替换与正则表达式匹配的字符串
  • split：把字符串分割为字符串数组

以下为实例：

<!DOCTYPE html>
<html>
<head>
    <title>表单验证</title>
    <meta charset="utf-8">
</head>
<body>
<!--表单注册页面     onsumit:提交表单做验证-->
<form method="get" action="#" onsubmit="return check()">
    用户名：<input type="text" name="username"><span id="nameSpan"></span><br/>
    密码：<input type="" name="password"><span id="pwdSpan"></span><br/>
    再次输入密码：<input type="" name="rePassword"><span id="repwdSpan"></span><br/>
    Email:<input type="" name="email"><span id="emailSpan"></span><br/>
    <input type="submit" name="" value="注册">
    <input type="reset" name="" value="重置">
</form>


</body>
</html>
<!--js代码-->
<script type="text/javascript">
    function check(){
        var uname=document.getElementsByName("username")[0].value
        var pwd=document.getElementsByName("password")[0].value
        var repwd=document.getElementsByName("rePassword")[0].value
        var email=document.getElementsByName("email")[0].value
        //取用户名的长度
        var namelength=uname.length;
        //获取span对象
        var nameSpan=document.getElementById("nameSpan");
        if(namelength==0){
            nameSpan.innerHTML='用户名不能为空';
            return false;
        }else if(namelength<4||namelength>16){
            nameSpan.innerHTML='用户名必须在4-16位之间';
            return false;
        }
        //获取密码的长度
        var pwdlength=pwd.length;
        //获取span对象
        var pwdSpan=document.getElementById("pwdSpan");
        if(pwdlength==0){
            pwdSpan.innerHTML='密码不能为空';
            return false;
        }else if(pwdlength<6){
            pwdSpan.innerHTML='密码不能少于6位';
            return false;
        }

        if(pwd!=repwd){
            var repwdSpan=document.getElementById("repwdSpan");
            repwdSpan.innerHTML='两次密码输入不一致';
            return false;
        }
        
        if(email.indexOf(".")==-1||email.indexOf("@")==-1){
            var emailSpan=document.getElementById("emailSpan");
            repwdSpan.innerHTML='邮箱格式不正确';
            return false;
        }
        //正确
        return true;
    }
</script>

该实例中，首先获取了用户输入的用户名，密码等信息，然后获取各字段的长度。通过if语句进行判断。通过输入框后面的span，动态判断用户是否输入合法。

获取光标事件

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>

    <!--获取光标事件 onfocus-->
emil:<input type="text" onfocus="clearText()" id="email" placeholder="请输入邮箱地址" type="email">

</body>
</html>
<script type="text/javascript">
    function clearText(){
        var email=document.getElementById("email");
        email.placeholder="";
    }
</script>

当鼠标点击输入框内时，输入框中的提示文字会自动消失。此效果通过获取光标事件：onfocus来实现。

<!DOCTYPE html>
<html>
<head>
    <title>表单验证</title>
    <meta charset="utf-8">
</head>
<body>
<!--表单注册页面     onsumit:提交表单做验证-->
<form method="get" action="success.html" onsubmit="return check()">
    用户名：<input type="text" onblur="checkname()" name="username"><span id="nameSpan"></span><br/>
    密码：<input type="password" onblur="checkpwd()" name="password"><span id="pwdSpan"></span><br/>
    再次输入密码：<input type="password"  onblur="checkrepwd()" name="rePassword"><span id="repwdSpan"></span><br/>
    Email:<input type="" onblur="checkmail()" name="email"><span id="emailSpan"></span><br/>
    <input type="submit" name="" value="注册">
    <input type="reset" name="" value="重置">
</form>


</body>
</html>
<!--js代码-->
<script type="text/javascript">
    function check(){    
        /*if(checkname()&&checkpwd()&&checkrepwd()&&checkmail()){
            return true;
        }
        return false; */
        return checkname()&&checkpwd()&&checkrepwd()&&checkmail();
    }
    
//用户名
function checkname(){
    var uname=document.getElementsByName("username")[0].value;
    //取用户名的长度
    var namelength=uname.length;
    //获取span对象
    var nameSpan=document.getElementById("nameSpan");
    if(namelength==0){
            nameSpan.innerHTML='用户名不能为空';
            return false;
        }else if(namelength<4||namelength>16){
            nameSpan.innerHTML='用户名必须在4-16位之间';
            return false;
        }
        nameSpan.innerHTML='';
        return true;    
}

//密码
function checkpwd(){
    var pwd=document.getElementsByName("password")[0].value;
    //获取密码的长度
    var pwdlength=pwd.length;
    //获取span对象
    var pwdSpan=document.getElementById("pwdSpan");
    if(pwdlength==0){
            pwdSpan.innerHTML='密码不能为空';
            return false;
        }else if(pwdlength<6){
            pwdSpan.innerHTML='密码不能少于6位';
            return false;
        }
        pwdSpan.innerHTML='';
        return true;
}

//再次输入密码
function checkrepwd(){
    var pwd=document.getElementsByName("password")[0].value;
    var repwd=document.getElementsByName("rePassword")[0].value;
    var repwdSpan=document.getElementById("repwdSpan");
    if(pwd!=repwd){
            repwdSpan.innerHTML='两次密码输入不一致';
            return false;
        }
        repwdSpan.innerHTML='';
        return true;
}

//邮箱
function checkmail(){
    var email=document.getElementsByName("email")[0].value;
    var emailSpan=document.getElementById("emailSpan");
    if(email.indexOf(".")==-1||email.indexOf("@")==-1){
            emailSpan.innerHTML='邮箱格式不正确';
            return false;
        }
        emailSpan.innerHTML='';
        return true;
}


</script>

以上达到的页面效果为，当用户输入用户名时，会使用获取光标时间，实时改变span内的提示语。用户名、邮箱、密码、再次输入密码分别进行判断。如果合法则返回true，不合法返回false。

正则表达式：

替换字符串中的a，变为H

（普通写法）

        var regExp=/a/ig;
        //定义一个字符串
        var str="Abbcjdkca";
        var newstr=str.replace(regExp,'H');
        alert(newstr);

（构造函数写法）

        var str1="aaaaaaaaaaaa";
        var regExp1=new RegExp('a','ig');
        var newstr1=str1.replace(regExp1,'B');
        alert(newstr1);

固定电话 区号为3位或4位，号码为7位或8位。

        var regExp2=/^\d{3,4}-\d{7,8}$/;
        var phone="037-23742934";
        if (!regExp2.test(phone)) {
            alert("电话格式输入错误")
        }else{
            alert("正确，号码为："+phone)
        }

4-16位用户名  

var regExp3=/^\w{4,16}$/

输入一个手机，判断全部是数字

var regExp4=/^\d{11}$/

以下为通过正则表达式达到简单表单验证的实例：

<!DOCTYPE html>
<html>
<head>
    <title>改-正则表达式-表单验证</title>
    <meta charset="utf-8">
</head>
<body>
<!--表单注册页面     onsumit:提交表单做验证-->
<form method="get" action="success.html" onsubmit="return check()">
    用户名：<input type="text" onblur="checkname()" name="username"><span  id="nameSpan"></span><br/>
    密码：<input type="password" onblur="checkpwd()" name="password"><span id="pwdSpan"></span><br/>
    再次输入密码：<input type="password"  onblur="checkrepwd()" name="rePassword"><span id="repwdSpan"></span><br/>
    Email:<input type="" onblur="checkmail()" name="email"><span id="emailSpan"></span><br/>
    <input type="submit" name="" value="注册">
    <input type="reset" name="" value="重置">
</form>


</body>
</html>
<!--js代码-->
<script type="text/javascript">
    function check(){    
        return checkname()&&checkpwd()&&checkrepwd()&&checkmail();
    }
    
//用户名
function checkname(){
    var uname=document.getElementsByName("username")[0].value;
    //获取span对象
    var nameSpan=document.getElementById("nameSpan");
    var regExp3=/^\w{4,16}$/;//用户名在4-16位之间的正则表达式
    if (!regExp3.test(uname)) {
            nameSpan.innerHTML='用户名必须在4-16位之间';
            return false;
    }
        nameSpan.innerHTML='';
        return true;    
}

//密码
function checkpwd(){
    var pwd=document.getElementsByName("password")[0].value;
    //获取span对象
    var pwdSpan=document.getElementById("pwdSpan");
    var regExp3=/^\w{6,}$/;
        if(!regExp3.test(pwd)){
        pwdSpan.innerHTML='密码不能少于6位';
            return false;
    }
        pwdSpan.innerHTML='';
        return true;
}

//再次输入密码
function checkrepwd(){
    var pwd=document.getElementsByName("password")[0].value;
    var repwd=document.getElementsByName("rePassword")[0].value;
    var repwdSpan=document.getElementById("repwdSpan");
    if(pwd!=repwd){
            repwdSpan.innerHTML='两次密码输入不一致';
            return false;
        }
        repwdSpan.innerHTML='';
        return true;
}

//邮箱
function checkmail(){
    var email=document.getElementsByName("email")[0].value;
    var emailSpan=document.getElementById("emailSpan");
    var regExp=/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
    if(!regExp.test(email)){
            emailSpan.innerHTML='邮箱格式不正确';
            return false;
    }

        emailSpan.innerHTML='';
        return true;
}


</script>

 

转载于:https://www.cnblogs.com/sonder/p/8869901.html

JavaScript表单验证实现代码
12-10
JavaScript 表单验证是网页开发中的重要一环，它允许开发者在用户提交数据到服务器之前进行数据的合法性检查，从而提高用户体验并减轻服务器端的压力。本文将深入探讨如何使用JavaScript来实现基本的表单验证。 ...
js表单验证
夜空下的凝视
04-19 161
<script type="text/javascript"> function check(){ var name = document.getElementById("name").value; var tel = document.getElementById("tel").value; var reg_name = /^[\u4e00-\u9fa5]{2,4...
JS ------ 表单校验
qq_42412646的博客
11-06 152
<html> <head> <title>注册页面</title> <meta charset="UTF-8"/> <script type="text/javascript"> // 校验用户名 function checkUname(){ // 获取用户名对象 var uname=d...
var userName=$("#userName").val()如何理解
热门推荐
xuanmu
02-16 1万+
val()是返回属性value对应的值。比如，使用$("#userName").val()就得到了"123"。 $("#userName")是id选择器,获得id为userName的标签,通过.val(),获得这个标签的value的值,赋值给你声明的变量 var userName ...
ajax异步校验名称输入重复,用jquery怎么验证名字在输入完之后马上提示是否有重复的代码...
weixin_42552315的博客
08-05 536
1、给输入名字的文本框绑定一个失去焦点事件，jquery中为focusout事件，同时在文本框后定义一个显示检查结果的span。2、当文本框失去焦点时，调用ajax异步向后台发送请求。3、将请求结果显示在文本框后面提示用户,避免所有信息填写完毕表单提交时才发现名字重复。示例：input type='text' id='name'/span id='errorMsg'/erorMsg//给文本框绑定...
JavaScript-密码框输入验证
qq_39111074的博客
09-26 2071
有时需要在前端页面，用户输入时先进行简单的验证，减少服务器压力 例如，限定了字段的输入长度： 输入框后有输入范围提示信息 输入错误长度的话，变成错误提示信息 输入正确长度的话，显示正确提示信息 实现思路 先写出输入提示信息， 定义错误和正确的类，写出相应样式 获取输入框元素对象，if语句对属性值进行长度判断，根据不同结果，显示不同的提示信息内容，设置不同的提示信息类名- - -以切换样式 示例代码： <!DOCTYPE html> <html lang="en"> <he
JavaScript 表单验证
2401_86544677的博客
11-27 985
在实际应用中，我们可能会遇到更复杂的验证需求。例如，在注册表单中，可能需要同时验证用户名的独特性、邮箱的有效性以及密码的强度。// 用户名唯一性验证try {if (!errors.push('用户名已被占用');errors.push('用户名验证失败');// 邮箱有效性验证if (!errors.push('请输入有效的邮箱地址');// 密码强度验证if (!errors.push('密码强度不足');// 密码一致性验证errors.push('两次输入的密码不一致');
Javascript表单验证要注意的事项
12-03
以下是一些在进行JavaScript表单验证时需要注意的事项： 1. **表单元素的查找方式**： - `getElementById()`：通过ID来查找表单，例如`var oForm = document.getElementById("Form1");` - `forms[]`数组：通过...
JavaScript表单验证的两种实现方法
10-20
在如今的Web开发中，JavaScript表单验证是客户端验证中非常常见且重要的一部分。通过对用户输入数据进行及时有效的校验，不仅可以提高用户体验，还能减轻服务器端的负担。本文将介绍JavaScript表单验证的两种实现...
C语言程序设计——用户密码输入与判断
Yearn*adn的博客
12-10 7426
今天给大家分享的是前几天写的一个程序，功能是输入用户名和密码，输入的密码用字符’ * '代替，并且用户名与密码无固定长度，并且判断用户名与密码是否正确。 #include<stdio.h> #include<stdlib.h> #include<conio.h> #include<string.h> char user[20]; char USER[20]="123456"; char passed[20]; char PASSED[20]="14725836
input 验证码 密码 输入框
唐僧的专栏
04-24 4319
前言：uniapp 在做需求的时候，经常会遇到；验证码输入框 或者 密码输框 自定义样式输入框 或者 格式化显示 银行卡 手机号码等等：这里总结了两种 常用的实现方式； 从这两种实现方式 其实也能延伸出其他的显示 方式； 先看样式： 自己实现 光标闪烁动画 第一种：可以识别 获得焦点 失去焦点 第一种实现的思路： 实际上就是，下层的真实 input 负责响应系统的输入，上面一层负责显示 应为输入框在手机端会 出现长按 学着 复制等等 输入框自带属...
tika-parser-font-module-3.1.0.jar中文-英文对照文档.zip
09-07
1、压缩文件中包含： 中文-英文对照文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 3、特殊说明： （1）本文档为人性化翻译，精心制作，请放心使用； （2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； （3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
perl-SelfLoader-1.23-420.el8.tar.gz
09-07
# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm
tika-parser-audiovideo-module-3.1.0.jar中文-英文对照文档.zip
09-07
1、压缩文件中包含： 中文-英文对照文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 3、特殊说明： （1）本文档为人性化翻译，精心制作，请放心使用； （2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； （3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
【故障诊断】基于matlab空气数据传感器在存在大气湍流的情况下故障检测和诊断【含Matlab源码 14132期】.zip
最新发布
09-07
Matlab领域上传的视频是由对应的完整代码运行得来的，完整代码皆可运行，亲测可用，适合小白； 1、从视频里可见完整代码的目录内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
perl-Scalar-String-0.003-8.el8.tar.gz
09-07
# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值