JavaScript实现表单校验的代码和思路分析

最新推荐文章于 2021-12-09 12:28:33 发布
最新推荐文章于 2021-12-09 12:28:33 发布
阅读量333 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript html js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41473905/article/details/104531398
版权
JavaScript实现表单校验的代码和思路分析
思路分析
  1. 写个checkName函数,用正则校验用户名,返回校验结果,结果要么为fasle,要么为true
  2. 给用户名输入框绑定失去焦点的onblur事件,事件中调用已定义好的checkName函数
  3. 给表单form绑定onsubmit事件,事件中直接调用并返回checkName函数的结果,由结果来决定是否提交表单’
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
<style>
    *{
    
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    body{
    
        background: url("../img/register_bg.png") no-repeat center;
        padding-top: 25px;
    }

    .rg_layout{
    
        width: 900px;
        height: 500px;
        border: 8px solid #EEEEEE;
        background-color: white;
        /*让div水平居中*/
        margin: auto;
    }

    .rg_left{
    
        /*border: 1px solid red;*/
        float: left;
        margin: 15px;
    }
    .rg_left > p:first-child{
    
        color:#FFD026;
        font-size: 20px;
    }

    .rg_left > p:last-child{
    
        color:#A6A6A6;
        font-size: 20px;

    }


    .rg_center{
    
        float: left;
       /* border: 1px solid red;*/

    }

    .rg_right{
    
        /*border: 1px solid red;*/
        float: right;
        margin: 15px;
    }

    .rg_right > p:first-child{
    
        font-size: 15px;

    }
    .rg_right p a {
    
        color:pink;
    }

    .td_left{
    
        width: 100px;
        text-align: right;
        height: 45px;
    }
    .td_right{
    
        padding-left: 50px ;
    }

    #username,#password,#email,#name,#tel,#birthday,#checkcode{
    
        width: 251px;
        height: 32px;
        border: 1px solid #A6A6A6 ;
        /*设置边框圆角*/
        border-radius: 5px;
        padding-left: 10px;
    }
    #checkcode{
    
        width: 110px;
    }

    #img_check{
    
        height: 32px;
        vertical-align: middle;
    }

    #btn_sub{
    
        width: 150px;
        height: 40px;
        background-color: #FFD026;
        border: 1px solid #FFD026 ;
    }
    #sub_btn {
    
        padding-left: 150px;
    }
    .error{
    
        color: red;
    }
</style>
    <script>
        // 页面加载完后,再去获取元素对象,否则获取不到
        window.onload = function () {
    
            // 给表单绑定onsubmit事件,事件中调用并返回函数的结果,来决定是否提交表单
            document.getElementById("form").onsubmit = function () {
    
                return checkPassword() && checkUsername() && checkEmail() && checkName() && checkTel() && checkCode();
            }
				  // 给输入框绑定失去焦点的事件onblur 
            document.getElementById(
最低0.47元/天 解锁文章
奔走中的蜗牛
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
利用js实现表单验证
每天进步一点点
10-06 2165
pass的代码: 表单验证通过！！！！ form.html的代码: JS程序开发         登陆邮箱: 登陆 form.js的代码: window.onload = function(){//如果要表单不提交，则要用的onsubmit事件，如果这个事件返回值为false，则不提交表单 va
javascript将异步校验表单改写为同步表单
10-24
在网页开发中，表单校验是必不可少的一环，它确保用户输入的数据符合预期，从而提高数据质量和用户体验。然而，传统的同步表单校验存在一些缺点，比如当服务器返回错误信息时，整个页面需要刷新，导致用户失去已输入...
js 表单验证思路
潇湘博客
07-19 977
 var total = 3;  //总共有几个表单元素function validation() {       for (i = 1; i               if (!isRadioChecked(i)) {  //i是名称                     alert("第" + i + "题为空");                     return false; 
原生js设计表单验证插件的思路分析
weixin_33910759的博客
09-09 245
这几天在做一个用原生js写的项目，需要用到表单验证的功能。因为之前公司项目中的表单验证是写在业务里的，改起来特别的麻烦，就想自己写一个表单验证的小工具。本来想在网上找一个教程研究研究的，但没找到太好的，最后决定自己研究吧。文中示例的代码都是我自己写的demo，并没有参考一些框架或者库的源码，所以代码可能比较难看，重点还是分析一下思路，后期我会把完善好的代码发到github上。原则：先说一下我自己写...
表单检验思路(element和antdesigin通用)
前端小攻城狮的博客
10-22 108
第一步绑定ref；rules；prop 第二步书写rules 第三部方法调用 save () { this.$refs.infoForm.validate(valid => { if (valid) { console.log(valid); } else { console.log('error submit!!'); return false; } .
js表单注册验证
qq_42058441的博客
06-07 3556
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面</title> <!-- <link href="css/register.css" rel="stylesheet" type="text/css"> --> &l...
使用JavaScript进行表单校验功能
10-19
最近在学习JavaScript，因此想到使用js实现表单校验。下面通过本文给大家分享使用javascript实现表单校验功能的步骤，需要的的朋友参考下吧
网页用户注册表单校验JavaScript脚本代码源码下载
05-02
简单的网页用户注册表单的校验，提供给大家学习，借鉴，完整代码已经打包，欢迎下载。截取一部分代码，如下： function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//...
html网页用户注册表单验证校验JavaScript源码代码
05-02
html网页用户注册表单验证校验JavaScript源码代码，完整代码已经打包，还迎下载，代码仅供学习参考。 function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//通过id...
JavaScript 完成注册页面表单校验的实例
12-10
1、步骤分析 第一步：确定事件(onsubmit)并为其绑定一个函数 第二步：书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>) 第三步：对用户输入的数据进行判断 第四步：数据合法(让表单提交...
js之表单校验
lys1695227550的博客
09-17 319
记录我学习的完整过程，需要者自行借鉴。 下面的action="time.html"可以自行更改 function $(id) { var Eid = document.getElementById(id); return Eid; } function check() { var Eusername = $("username"); if(Euserna
理解JavaScript 表单验证
qq_38918953的博客
04-30 294
在这里插入代码片 function validateForm() { var x = document.forms["myForm"]["fname"].value; forms是一个表单集合（对象）； 比如有多个form，其中一个是myForm，相当于key forms["myForm"]就是一种对象取值的方法 if (x == null || x == "") { ...
js 进行表单验证 细节显示各种功能 详细解说每一步
liuhebahuang的博客
08-10 219
表单验证 表单是网站获取用户信息的主要途径，用户输入或选择的就是数据，将来存储到数据库中。 表单的作用是什莫？表单验证是JS很重要的功能，防止逻辑上错误的数据提交给服务器，减少和服务器的通信次数，降低服务器的 负担 原则：能在浏览器中通过JS进行验证就不提交给服务器进行验证。 <!DOCTYPE html> <html> <head> <meta charser="utf-8"> <title>js的表单
JavaScript表单验证完美代码
热门推荐
山那边的瘦子
05-20 1万+
用原生JS写一个简单的表单验证功能，代码分为html部分和js部分，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下 用原生JS写一个简单的表单验证 首先，是html部分 &amp;lt;div class=&quot;divAll&quot;&amp;gt; &amp;lt;div id=&quot;titles&quot;&amp;gt;新用户注册&amp;lt;/div&amp;gt;
JavaScript表单验证
布洛芬
12-09 699
当文本框失去鼠标的焦点时，判断文本框中的内容是否为空。用submit判断提交时各文本框中的内容是都符合条件，不符合条件文本框后面提示并文本框变红。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #home { height: 100px; } &lt
表单验证的思路--先屡清楚中文思路，再考虑代码如何实现
weixin_34248118的博客
03-17 89
文／饥人谷_韩宝亿（简书作者）原文链接：http://www.jianshu.com/p/55340bf14cfd著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。 验证插件的思路 一、定义验证规则和出错信息 1.邮箱必须含有@ 2.手机必须是数字 3.用户名最小长度为3，最大长度为30 Paste_Image.png 二、收集表单数据 1.获取所以...
对表单输入的数据做校验
tgyd2006的专栏
05-23 581
对表单输入的数据做校验 在struts中带有了Jakarta Commons中的一个叫做Validator的数据校验框架。 使用起来也是非常的简单。 首先将 struts提供的validator-rules.xml的配置文件放入WEB-INF中。 然后在struts-config.xml中加入validation的plugin声明： &lt;plug-in className="org.a...
JS—简单表单验证代码
万国
02-27 432
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ width: 280px; margin: 20px auto; bord...
用JavaScript和正则表达式写五个表单的校验
最新发布
04-09
好的，我可以为您提供一些用 JavaScript 和正则表达式写五个表单的校验的代码示例： 1. 校验邮箱： ``` function validateEmail(email) { var regex = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/; // 邮箱正则表达式 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奔走中的蜗牛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值