JavaScript表单验证

最新推荐文章于 2023-08-16 12:23:17 发布
最新推荐文章于 2023-08-16 12:23:17 发布
阅读量457 收藏
点赞数 2
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65768991/article/details/123335555
版权

JavaScript表单验证

简单验证

使用String类型来对数据格式进行判断
先验证用户名与密码，给未填写提示
设置约束给判断提示

这是登录的界面

<form action="" id="myForm">
    <p>名字: <input type="text" id="userName" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p>
    <p>密码: <input type="text" id="userPwd" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p>
    <p>邮箱: <input type="text" id="userEmail" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p>
    <p>
        <button>登录</button>
    </p>
</form>

检查名字

1
//用来检查名字是否合规
function checkLabel(obj) {
var length = obj.value.length
// var label=obj.nextElementSibling
var label = obj.parentElement.getElementsByClassName(“error”)[0]
if (length > 0) {//里面有内容
//名字的大小应该在 3-6 之间
if (length >= 3 && length <= 6) {
label.textContent = “😊”
return true
}
//不在区间之内
label.textContent = “长度必须在3-6之间”
return false
}
//里面没有内容
label.textContent = “长度必须大于0”
return false
}

2
//用来检查名字是否合规
function checkName() {
var length = userName.value.length
if (length > 0) {//里面有内容
//名字的大小应该在 3-6 之间
if (length >= 3 && length <= 6) {
l1.textContent = “😊”
return true
}
//不在区间之内，因为一般输入框后都有提示
l1.textContent = “长度必须在3-6之间”
return false
}
//里面没有内容
l1.textContent = “长度必须大于0”
return false
}

检查密码

//用来检查密码是否合规
    function checkPwd() {
        var length = userPwd.value.length
        if (length > 0) {//里面有内容
            //名字的大小应该在 3-6 之间
            if (length >= 3 && length <= 6) {
                l2.textContent = "😊"
                return true
            }
            //不在区间之内
            l2.textContent = "长度必须在3-6之间"
            return false
        }
        //里面没有内容
        l2.textContent = "长度必须大于0"
        return false
    }

检查邮箱

//用来检查邮箱是否合规
function checkEmail() {
var length = userEmail.value.length
if (length > 0) {//里面有内容
//名字的大小应该在 3-6 之间
if (length >= 3 && length <= 6) {
l3.textContent = “😊”
return true
}
//不在区间之内
l3.textContent = “长度必须在3-6之间”
return false
}
//里面没有内容
l3.textContent = “长度必须大于0”
return false
}
当数据都输入合规时需要写提交事件
//添加提交事件(会具备返回值)
myForm.onsubmit = () => {
//阻止表单的提交 需要返回 false
// return checkName()&&checkPwd()&&checkEmail()
var f1 = checkLabel(userName)
var f2 = checkLabel(userEmail)
var f3 = checkLabel(userPwd)
return f1 && f2 && f3
}

正则验证

正则的规则

\d数字[0~9]
\D非数字^ [0~9]（^与[]之间没有空格）
\w数字+英文+下划线[0~9a-zA-Z_]
\W非数字+英文+下划线^ [0~9a-zA-Z_]（^与[]之间没有空格）
.任意数字
? 0~1次
+至少一次
*0~任意次
\d{n}n个数字
\d{n~m}至少n次，最多m次

注意事项

规则必须以/^开头
规则必须以&/结尾
规则只需要\d,而不是\d
定义正则对象：var rex=/^\d{4}$/
使用正则对象：rex.test(‘123’)

正则验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="m1">
<span id="l1"></span>
<p>
    密码等级<span id="l2"></span>
</p>
<script>
    m1.onkeyup=function (){
        //长度必须在6-10之间
        var str=m1.value
        if(str!=""){
            //定义正则
            var r1=/^\w{6,10}$/
            // 数字 英文（小写 大写） .
            var r2=/^.*[a-z].*$/
            var r3=/^.*[A-Z].*$/
            var r4=/^.*\d.*$/
            //密码等级
            var dj=""
            //开始正则验证
            if(r1.test(str)){
                l1.textContent="O(∩_∩)O😄"
                if(r2.test(str))dj+="☆"
                if(r3.test(str))dj+="☆"
                if(r4.test(str))dj+="☆"
                l2.textContent=dj
                return
            }
            //不满足
            l1.textContent="不符合格式"
            return
        }
        l1.textContent="不能为空"
    }

</script>
</body>
</html>

二级联动

需要数组来写
//类型不限制
//长度不限制
//数组可以是字符串

var provinces=[]
    //城市
    provinces["日本省"]=["北海道","桥豆麻袋","摩西摩西"]
    provinces["湖南省"]=["长沙","北京","西八"]
    provinces["广西省"]=["表妹","螺蛳粉","表郭"]

二级联动代码总览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="province" onchange="myChange()"></select>
<select id="cities"></select>

<script>

    //数组怎么写?
    //类型不限制
    //长度不限制
    //数组可以是字符串
    var provinces=[]
    //城市
    provinces["日本省"]=["北海道","桥豆麻袋","摩西摩西"]
    provinces["湖南省"]=["长沙","北京","西八"]
    provinces["广西省"]=["表妹","螺蛳粉","表郭"]


    //省份怎么来
    //  for of 相当于foreach 遍历元素
    //  for in 遍历下标
    for(let i in provinces){
        //往省份的下拉框中添加选项
        //<option value="i">i</option>
        province.appendChild(new Option(i,i))
    }

    //城市里面放谁?
    function setCity(name) {
        for(let i of provinces[name]){
            cities.appendChild(new Option(i,i))
        }
    }

    setCity(province.value)

    function myChange() {
        //清空原来的选项
        cities.innerHTML=""
        //输入框 和 下拉框
        setCity(province.value)
    }
</script>
</body>
</html>

今天就到这了，明天见

陈峰806
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 表单验证
qq_42287758的博客
08-12 124
表单验证 本章内容 通过js方法进行表单验证 正则表达式的使用 第一节 表单校验 1.表单提交原理 使用submit按钮结合表单的onsubmit事件进行校验并提交数据 使用js代码进行校验，并通过表单的submit方法进行提交 <!DOCTYPE html> <html> <head> <...
javaScript-06 表单验证 详细易懂，加案例分析
YZZdear的博客
03-29 2186
JavaScript表单验证，全网最详细
javascript表单验证
lijie1025的博客
03-16 1906
正则表达式适用单个字符串来描述，匹配一系列符合某个句法规则的字符串搜索模式用某种模式去匹配一类字符串的公式通过使用正则表达式，可以：1.测试字符串内的模式。2.替换文本。3.从字符串中提取字符串。//字面量方式，其由包含在斜杆之间的模式组成，如下所示：//构造函数方式，调用RegExp对象的构造函数，如下所示：var regex=/ 正则规则 /;//调用方法判断是否满足要求var flag = regex.test( '内容' );
javascript系列之表单验证
最新发布
StayAlive1887的博客
08-16 626
表单验证一般发生在服务器端，在客户端输入必要的数据然后按下submit按钮之后就可以进行服务器端的表单验证。如果客户端的数据输入不正确或有遗漏，这时候服务器端不得不发送所有的数据到客户端，并要求使用正确的信息重新提交表单。同理，”@“不应该是eamil地址的第一个字符，最后，”.“必须至少在”@"一个字符之后。在上面的表单中我们调用了validate()函数去验证数据，当onsubmit事件发生时验证数据。现在，我们将会看到在提交到web服务器之前如何验证输入的表单数据。
JavaScript之表单验证
weixin_64938628的博客
03-06 1万+
前言：我们这一次讲的表单验证运用了前面几篇文章说讲的的内容，比之前的要难一些，我会在代码里以注释的形式详细的讲解。 目录 一.简单的表单验证 验证方式一: 验证方式二： 二.正则验证 一.正则的规则 内容 次数 二.正则的注意事项 三.二级联动 一.简单的表单验证 验证方式一: <html> <head> <meta charset="UTF-8"> <title>Title&...
JavaScript表单验证实现代码
12-10
JavaScript 表单验证是网页开发中的重要一环，它允许开发者在用户提交数据到服务器之前进行数据的合法性检查，从而提高用户体验并减轻服务器端的压力。本文将深入探讨如何使用JavaScript来实现基本的表单验证。 ...
常用javascript表单验证汇总
10-23
本文将详细介绍一些常用的JavaScript表单验证方法，并通过一个实践案例来具体说明。 1. 验证输入是否为空 在JavaScript中，我们可以检查输入字段的值是否为空。例如，`if(x=="")` 判断变量x的值是否为空字符串，...
JavaScript表单验证&正则表达式&三级联动（六）
m0_67376124的博客
03-06 496
一，表单验证的概念 表单验证是JavaScript的高级选项之一。 JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证。 被JavaScript验证这些表单数据有： 1.用户是否填写表单中不填项目 2.用户输入的邮箱地址是否合法？ 3.用户是否输入自己的合法日期？ 4.用户是否在数据域中填写了文本？ 二，表单验证的常见函数及事件 常见函数 toLowerCase() 将字符串转换为小写 toUpperCase() .
js编写常用的表单验证，js表单验证完整代码
qq_36395463的博客
01-17 972
日期： 电话号码： E-mail： 金额： 输入汉字： 输入密码： 弱中强 再一次输入密码： 输入验证码：获取验证码
JavaScript实现表单验证（包含实例）
Cavewang的博客
09-06 3837
表单验证表单验证意义与场景降低服务器压力提升用户体验表单验证举例界面效果展示 表单验证意义与场景 降低服务器压力 拦截不合格的数据，避免直接提交到服务器，可以显著降低服务器开销 提升用户体验 早期的互联网，表单项都是非常多的，注册个账号，经常需要填写20+个字段。而其中有一个填写不正 确就要等待几十秒时间。如果有了表单验证，反馈是实时的，而且脚本还能把你定位到填写错误的具体 字段。现在虽然无刷新技术早已普及，但是只依赖服务端验证，还是会有几百毫秒的延迟，实际使用会 有一种很难受的粘滞感。 表单验证举例 js
javascript 快速入门之第六章 表单验证
qq_61313896的博客
03-23 1433
一：表单验证的基本概念 为了保证用户提交的信息都是正确的，保证系统的安全性，验证是必不可少的，同时也为降低服务器的压力，减少资源损耗，在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 二：表单验证的实现方式 内置对象String 正则表达式 内置对象String基本概念 String 对象用于处理文本，也就是字符串。一个字符串用于存储一系列的字符，通常 JS 字符 串是原始值，可以使用变量声明，也可以使用 new 关键...
HTML表单验证(含用户名，密码，邮箱，手机号，验证码-验证)
热门推荐
qq_46015509的博客
06-09 4万+
HTML 表单登录js简单验证

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值