使用JS完成注册页面表单校验

最新推荐文章于 2022-08-15 19:49:49 发布
最新推荐文章于 2022-08-15 19:49:49 发布
阅读量1.7k 收藏 6
点赞数 2

使用JS完成注册页面表单校验
1.技术分析
使用事件(聚焦事件onfocus和离焦事件onblur),之前使用onsubmit也需要！
使用
向页面指定位置写入内容：innerHTML属性(该属性的值存在覆盖现象)
2.步骤分析
第一步：确定事件(给出提示信息使用聚焦事件，给出校验结果信息使用离焦事件)并为其绑定函数
第二步：聚焦事件绑定的函数中(获取span给出提示信息)
第三步：离焦事件绑定的函数中(获取用户输入的内容进行判断)
第四步：如果失败，在span位置给出错误提示信息，如果成功，让span内容为空。
3.代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
        <!--<script>
            function checkForm(){
                //alert("aa");
                /**校验用户名*/
                //1.获取用户输入的数据
                var uValue = document.getElementById("user").value;
                //alert(uValue);
                if(uValue==""){
                    //2.给出错误提示信息
                    alert("用户名不能为空!");
                    return false;
                }

                /*校验密码*/
                var pValue = document.getElementById("password").value;
                if(pValue==""){
                    alert("密码不能为空!");
                    return false;
                }

                /**校验确认密码*/
                var rpValue = document.getElementById("repassword").value;
                if(rpValue!=pValue){
                    alert("两次密码输入不一致!");
                    return false;
                }

                /*校验邮箱*/
                var eValue = document.getElementById("eamil").value;
                if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
                    alert("邮箱格式不正确!");
                    return false;
                }

            }
        </script>-->

        <script>
            /*function showTips(){
                document.getElementById("userspan").innerHTML="<font color='gray'>用户名必填！</font>";
            }


            function checkUser(){
                //1.获取用户输入的用户名数据
                var uValue = document.getElementById("user").value;
                //2.进行校验
                if(uValue==""){
                    document.getElementById("userspan").innerHTML="<font color='red'>用户名不能为空!</font>";
                }else{
                    document.getElementById("userspan").innerHTML="";
                }
            }*/

            function showTips(id,info){
                document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
            }


            function check(id,info){
                //1.获取用户输入的用户名数据
                var uValue = document.getElementById(id).value;
                //2.进行校验
                if(uValue==""){
                    document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
                }else{
                    document.getElementById(id+"span").innerHTML="";
                }
            }
        </script>
    </head>
    <body>
        <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
            <!--1.logo部分-->
            <tr>
                <td>
                    <!--嵌套一个一行三列的表格-->
                    <table border="1px" width="100%">
                        <tr height="50px">
                            <td width="33.3%">
                                <img src="../img/logo2.png" height="47px" />
                            </td>
                            <td width="33.3%">
                                <img src="../img/header.png" height="47px" />
                            </td>
                            <td width="33.3%">
                                <a href="#">登录</a>
                                <a href="#">注册</a>
                                <a href="#">购物车</a>
                            </td>
                        </tr>
                    </table>
                </td>               
            </tr>
            <!--2.导航栏部分-->
            <tr height="50px">
                <td bgcolor="black">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">
                        <font size="5" color="white">首页</font>
                    </a> &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">
                        <font color="white">手机数码</font>
                    </a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">
                        <font color="white">电脑办公</font>
                    </a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">
                        <font color="white">鞋靴箱包</font>
                    </a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">
                        <font color="white">家用电器</font>
                    </a>
                </td>
            </tr>
            <!--3.注册表单-->
            <tr>
                <td height="600px" background="../img/regist_bg.jpg">
                    <!--嵌套一个十行二列的表格-->
                    <form action="#" method="get" name="regForm" onsubmit="return checkForm()">
                        <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
                            <tr height="40px">
                                <td colspan="2">
                                    <font size="4">会员注册</font> &nbsp;&nbsp;&nbsp;USER REGISTER 
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    用户名
                                </td>
                                <td>
                                    <input type="text" name="user" size="34px" id="user" onfocus="showTips('user','用户名必填！')" onblur="check('user','用户名不能为空！')"/><span id="userspan"></span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    密码
                                </td>
                                <td>
                                    <input type="password" name="password" size="34px" id="password" onfocus="showTips('password','密码必填')" onblur="check('password','密码不能为空!')"/><span id="passwordspan"></span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    确认密码
                                </td>
                                <td>
                                    <input type="password" name="repassword" size="34px" id="repassword"></input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Emaile
                                </td>
                                <td>
                                    <input type="text" name="email" size="34px" id="eamil"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    姓名
                                </td>
                                <td>
                                    <input type="text" name="username" size="34px"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    性别
                                </td>
                                <td>
                                    <input type="radio" name="sex" value="男"/>男
                                    <input type="radio" name="sex" value="女"/>女
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    出生日期
                                </td>
                                <td>
                                    <input type="text" name="birthday" size="34px"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    验证码
                                </td>
                                <td>
                                    <input type="text" name="yzm" />
                                    <img src="../img/yanzhengma.png" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <input type="submit" value="注册" />
                                </td>
                            </tr>
                        </table>
                    </form>
                </td>               
            </tr>
            <!--4.广告图片-->
            <tr>
                <td>
                    <img src="../img/footer.jpg"  width="100%"/>
                </td>
            </tr>
            <!--5.友情链接和版权信息-->
            <tr>
                <td align="center">
                    <a href="#">关于我们</a>
                    <a href="#">联系我们</a>
                    <a href="#">招贤纳士</a>
                    <a href="#">法律声明</a>
                    <a href="#">友情链接</a>
                    <a href="#">支付方式</a>
                    <a href="#">配送方式</a>
                    <a href="#">服务声明</a>
                    <a href="#">广告声明</a>
                    <p>
                        Copyright © 2005-2016 传智商城 版权所有 
                    </p>
                </td>
            </tr>
        </table>
    </body>
</html>

结果：
这里写图片描述

qq_41485882
关注
JavaScript 完成注册页面表单校验的实例
12-10
1、步骤分析 第一步：确定事件(onsubmit)并为其绑定一个函数 第二步：书写这个函数(获取用户输入的数据&...2、完成注册页面表单校验 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
注册输入校验
fandoudou123的专栏
03-29 615
输入校验：   >保存错误信息   >把domain对象保存到request域（回显）   >转发到对应的jsp页面 /* * 输入校验 * 1.创建一个Map封装错误信息，Key为表单字段名称，value为错误信息 */ Map errors=new HashMap(); /* * 2.获取user中的username,password,email进行
使用原生js写一个简单的注册登录页面
apple_61973423的博客
08-15 2万+
使用JavaScript写的登录注册页面
JavaScript定义注册页面
m0_52348906的博客
11-20 5007
项目场景： 各文本框输入信息在失去焦点时严证，如果输入有误，在文本框后面提示错误信息，各文本框输入信息的具体要求见问题描述。 考察如下： 获取字符串类型的表单数据 使用字符串对象方法验证用户输入信息的合法性 表单提交时使用onsubmit事件触发验证函数 问题描述： (1)用户名是由英文字母和数字组成的4～16位字符，以字母开头。加载页面时提示相应信息如图所示。 (2)密码由4～10位字符组成，加载页面时提示相应信息，密码和确认密码必须一致。 (3)电子邮箱信息必须包含“@.
javascript表单校验注册页面
老王玩编程
05-04 2174
一个简单的HTML页面 利用javascript知识点 和正则表达公式 练习巩固一下 然后突发奇想 仿制一下QQ的注册页面(仅校验部分)
使用JavaScript进行表单校验功能
10-19
同时，确保表单校验的JavaScript代码在DOM元素加载完成后执行，以保证元素ID或name属性可以被正确获取。这样，我们就可以在不提交到服务器的情况下，迅速而有效地验证用户输入的数据，提高用户体验和数据的安全性。
html网页用户注册表单验证校验JavaScript源码代码
05-02
html网页用户注册表单验证校验JavaScript源码代码，完整代码已经打包，还迎下载，代码仅供学习参考。 function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//通过id...
javascript将异步校验表单改写为同步表单
10-24
然而，传统的同步表单校验存在一些缺点，比如当服务器返回错误信息时，整个页面需要刷新，导致用户失去已输入的数据。为了解决这些问题，异步校验应运而生。本文将探讨如何使用JavaScript将异步校验表单改写为同步...
JS判断QQ号是否合法、JS原生判断、正则判断
沐枫
09-02 1885
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
登陆界面用户输入信息验证
10-20
javascript+html+jsp登陆界面验证用户输入的正确性。
JS注册表单验证
10-15
网上常见的用JS编写的注册表单验证的代码，非常实用哦
注册表单验证
03-29
一个简单的注册页面，其中包括了一些简单的函数，可以判断输入的信息是否合法
原生js实现表单验证（提交后验证）
08-29
在平常的页面当中，我们经常用到表单和表单验证，表单验证是数据进入数据库前一次在客户机利用脚本检查数据类型的行为。作为一个初学者，在这里贴下我的菜鸟代码。
js简单的注册表单密码验证代码
11-01
js简单的注册表单密码验证代码
<Java Web学习初级阶段>JavaScript实现注册页面的表单验证
拂晓弄尘影的博客
09-12 9419
代码实现： 表单验证 //初始化页面 function initform(){ //第一个文本框获取焦点 //document.getElementById("username").focus(); //产生验证码 getCode(); } //产生验证码 function getCode(){ var code = String(Math.round(M
JS实现：注册页面表单验证
kuaixiao0217的博客
05-07 4225
JS实现注册页面表单验证
登录注册页面表单验证原生js
weixin_39042890的博客
07-31 4541
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no&q
【Javascript】入门之QQ验证(嵌套三目运算符)
qq_37086980的博客
11-25 369
题目描述: 请输入QQ号, 判断 1、有没有输入 2、输入的是不是数字 3、不能有0在前面 4、不能是小数 5、输入的数字必须在5位以上、11位以下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...
JS注册页面校验与登陆功能实现详解
"JS校验与最终登陆界面功能的实现主要涉及到前端JavaScript代码，用于验证用户在注册或登录时输入的用户名和密码是否符合特定规则。这个示例中，主要展示了如何利用JavaScript进行简单的表单验证，以提高用户体验并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值