JS注册数据校验以及表单的提示校验

最新推荐文章于 2023-03-29 15:51:50 发布
最新推荐文章于 2023-03-29 15:51:50 发布
阅读量835 收藏 3
点赞数
分类专栏： JavaWeb 文章标签： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_40662281/article/details/80211363
版权

注册界面的数据校验

function checkForm() {
    //验证用户名
    var userName = document.getElementById("userName").value;
    if(userName == "") {
        alert("用户名不能为空！");
        return false;//表单不提交
    }

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

    //再次验证密码
    var repassword = document.getElementById("repassword").value;
    if(repassword != password) {
        alert("两次密码不一致！");
        return false;
    }

    //验证邮箱
    /*
     * JS中有两种匹配正则的方式:
     * 使用String对象中的match方法.
     * 使用正则对象中的test方法.
     */
    var emali = document.getElementById("email").value;
    if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email)) {
        alert("邮箱格式不正确！");
        return false;
    }

}

表单的提示和检验

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>注册界面</title>
        <style>
            .bodyDiv{
                width: 90%;
                margin:0 auto;/*设置body居中*/
            }

            .logoDiv{
                /*border: 1px solid red;*/
                width: 33%;
                float: left;
                height: 80px;
            }

            .logoDiv a{
                text-decoration:none;/*去下划线*/
            /*overflow: hidden; /*防止内容超出容器或者产生自动换行*/
            }

            .clear{
                clear: both;
            }

            .menuDiv{
                height: 40px;
                background-color: black;
                width: 100%;
                /*border: 1px solid red;*/
            }

            .menuDiv a{
                text-decoration:none;/*去下划线*/
                color: white;
                font-size: 20px;
            }

        </style>
        <script>
            function trip() {
                document.getElementById("userNameSpan").innerHTML = "<font color='red'>用户名应该用数字或者字母组成！</font>"
            }

            function checkUsername() {
                var userName = document.getElementById("userName").value;
                if(userName == "") {
                    document.getElementById("userNameSpan").innerHTML = "<font color='red'>用户名不能为空！</font>"
                }
                else {
                    document.getElementById("userNameSpan").innerHTML = "<font color='green'>用户名可用！</font>" 
                }

            }

            function passwordTrips() {
                document.getElementById("passWordSpan").innerHTML = "<font color='red'>密码不能为空！</font>";
            }

            function repasswordTrips() {
                document.getElementById("repasswordSpan").innerHTML = "";
            }

            function checkPassword() {
                document.getElementById("passWordSpan").innerHTML = "";
                var password = document.getElementById("password").value;
                var repassword = document.getElementById("repassword").value;
                if(password != repassword) {
                    document.getElementById("repasswordSpan").innerHTML = "<font color='red'>两次密码不一致！</font>"
                }
                else {
                    document.getElementById("repasswordSpan").innerHTML = "<font color='green'>密码可用！</font>"
                }
            }


            function checkForm() {
                var uesrName = document.getElementById("userName").value;
                if(uesrName == "") {
                    document.getElementById("userNameSpan").innerHTML = "<font color='red'>用户名不能为空！</font>"
                    //alert("用户名不能为空！");
                    return false;
                }

//              var password = document.getElementById("password").value;
//              if(password == "") {
//                  document.getElementById("password").innerHTML = "<font color='red'>密码不能为空！</font>"
//              }
            }
        </script>
    </head>
    <body>
        <div class="bodyDiv">
            <div>
                <div class="logoDiv">
                    <img src="img/logo2.png" />
                </div>
                <div class="logoDiv">
                    <img src="img/header.jpg" />
                </div>
                <div class="logoDiv" style="margin-left:150px ;margin-top: 35px;height: 45px;width: 180px;">
                    <a href="#" >登录</a>&nbsp;&nbsp;&nbsp;
                    <a href="#" >注册</a>&nbsp;&nbsp;&nbsp;
                    <a href="#" >购物车</a>&nbsp;&nbsp;&nbsp;
                </div>
                <div class="clear"></div>
            </div>

            <div class="menuDiv">
                <a href="#">首页</a>&nbsp;&nbsp;&nbsp;
                <a href="#">手机数码</a>&nbsp;&nbsp;&nbsp;
                <a href="#">电脑办公</a>&nbsp;&nbsp;&nbsp;
                <a href="#">烟酒茶糖</a>&nbsp;&nbsp;&nbsp;
                <a href="#">鞋靴箱包</a>&nbsp;&nbsp;&nbsp;
            </div>

            <!--
                注册表
            -->
            <div style="height: 600px;width: 100%;background-image: url(image/regist_bg.jpg);">
                <div style="height: 450px;
                    background: white;
                    width: 600px;
                    position: absolute;
                    margin-top: 70px;
                    margin-left: 300px;
                    border: 5px solid gray;">
                    <form onsubmit="return checkForm()">
                        <table width="100%" cellspacing="15" >
                            <tr>
                                <td>用户名</td> 
                                <td><input type="text" name="userName" id="userName" onfocus="trip()" onblur="checkUsername()" ><span id="userNameSpan"></span></td>
                            </tr>
                            <tr>
                                <td>密码</td>
                                <td><input type="password" name="password" id="password" onfocus = "passwordTrips()" onblur="checkPassword()" ><span id="passWordSpan"></span></td>
                            </tr>
                            <tr>
                                <td>确认密码</td>
                                <td><input type="password" id="repassword" name="repassWord" onfocus="repasswordTrips()" onblur="checkPassword()"><span id="repasswordSpan"></span></td>
                            </tr>
                            <tr>
                                <td>性别</td>
                                <td>
                                    <input type="radio" name="sex" value="男" />男<input type="radio" name="sex" value="女" />女
                                </td>
                            </tr>
                            <tr>
                                <td>籍贯</td>
                                <td>
                                    <select name="province">
                                        <option>--请选择--</option>
                                    </select>
                                </td>
                            </tr>   
                            <tr>
                                <td>爱好</td>
                                <td>
                                    <input type="checkbox" name="hobby" value="篮球"/>篮球
                                    <input type="checkbox" name="hobby"  value="足球" />足球
                                    <input type="checkbox" name="hobby" value="排球" />排球 
                                </td>
                            </tr>
                            <tr>
                                <td>邮箱</td>
                                <td>
                                    <input type="email" name="email" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <input type="submit" value="注册" />
                                    <input type="submit" value="取消" />
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>

            <!--图片栏-->
                <div style="width: 100%;">
                    <img src="image/footer.jpg" width="100%"/>
                </div>
            <!--底栏-->
                <center>
                    <div class="linkDiv" >
                        <a href="#" >关于我们</a>&nbsp;&nbsp;
                        <a href="#" >联系我们</a>&nbsp;&nbsp;
                        <a href="#" >招贤纳士</a>&nbsp;&nbsp;
                        <a href="#" >法律声明</a>&nbsp;&nbsp;
                        <a href="#" >友情链接</a>&nbsp;&nbsp;
                        <a href="#" >支付方式</a>&nbsp;&nbsp;
                        <a href="#" >配送方式</a>&nbsp;&nbsp;
                        <a href="#" >服务方式</a>&nbsp;&nbsp;
                        <a href="#" >广告声明</a>&nbsp;&nbsp;
                    </div>

                <div>
                    <font>--------------------------------------------------------------------------------------------------</font>
                    <br />
                    <font> Copyright © 2005-2016 传智商城 版权所有 </font>
                </div>
            </center>
        </div>
    </body>
</html>
BullZeng
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现表单输入框提示
weixin_46143360的博客
03-16 1137
用js实现： 1.form表单提交：input框无输入内容，弹框进行提示。 2.验证密码和确认密码是否一致。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascrip...
js实现表单验证是否为空 为空则提示输入信息
爬楼梯的前端小白的博客
09-05 1880
用户输入信息为空 表单失去焦点时则显示提示信息 反之输入信息之后 则不显示要求用户输入 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi...
js表单验证，并显示红色警告
digger_419的博客
03-17 6342
我们在表单输入数据的时候，往往需要对输入的数据进行验证，如字段非空，邮箱格式，手机号，电话号等等。下面我将最近使用的表单验证分享一下。 var checkObject = { checkUsername: function (value) { if(value == ""){ $("#username").attr("style", "di
js 实现判断表单中必填项并进行提示
热门推荐
clara8871的专栏
09-15 1万+
html form 中的onsubmit在点submit按钮时被触发。 如果return false;则结果不会被提交到action中去（也就是提交动作不会发生），如果不返回或者返回true，则执行提交动作。 action 属性">actionURL规定当提交表单时向何处发送表单数据。结论： 1.如果html中使用form的onsubmit进行提交前的数据验证，需要验证函数返回一个布尔值，
使用Js验证表单，证失败进行提示
琅枫的博客
04-23 582
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function check() { var form = document.getElementById("form"); // 获得form表单的id var user = form.
JavaScript 完成注册页面表单校验的实例
12-10
1、步骤分析 第一步：确定事件(onsubmit)并为其绑定一个函数 第二步：书写这个函数(获取用户输入的数据&...2、完成注册页面表单校验 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
网页用户注册表单校验JavaScript脚本代码源码下载
05-02
简单的网页用户注册表单的校验，提供给大家学习，借鉴，完整代码已经打包，欢迎下载。截取一部分代码，如下： function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//...
Vue.js 表单校验插件
11-23
内置基础的校验规则和错误提示。可自定义规则，规则类型支持正则、函数或者字符串。校验规则可全局注册也可以组件内注册。插件会给 vm 添加 $vuerify 对象，同时 watch 数据并校验合法性，如果有错误会存入 vm.$...
微信小程序实现注册登录功能(表单校验、错误提示)
12-30
口说无凭，实现效果如下 前端 部分  注册功能 1、wxml文件 <view class=u
JS输入框验证信息提示
qq_45387575的博客
02-19 4114
描述： 1、首先输入框默认显示手机号，下面提示：请输入你的手机号 2、光标放上去的时候开始填写，填写完毕后（那么就要先提取鼠标失去光标这个事件）如果手机号码不正确： 文本框变红，并且下方用红字提示：请填写正确的手机号码 如果输入的手机号码正确：文本框属性不发生变化 问题：怎么判断输入的手机号码是否复合要求？？？ 未写完？？ <!DOCTYPE html> <html lang="en"> <head> <meta charse...
表单JS弹出填写提示
weixin_30633949的博客
04-16 287
HTML <form id="form1" runat="server"> <div> <div style="margin-top:100px"> <asp:TextBox ID="TextBox1" runat="server" HintTitle="增加的内容信息标题" HintInfo="控制在100个字数内，标题...
JavaScript------如何解决表单登录信息输入为空显示提示
weixin_34375054的博客
01-13 1077
&lt;form name="fname" method="post" action="../Home/Login" onsubmit="return My();"&gt; &lt;input type="text" name="user" /&gt; &lt;input type="submit&quot
用js做一个输入框，在用户没有输入的时候不能提交并提示
zhanghaibing0903的专栏
10-21 5140
function Validate(){             var txtname = document.getElementById("txt_name");             var button = document.getElementById("btnValidate");             var form = document.getElementById("
如何避免提交页面，信息未填写完善 就出现注册成功提示 基于js
weixin_34107739的博客
10-25 1051
基于bootstrip做好一个页面后，出现如下效果图 这个页面是未经过任何后端处理的页面，如果直接填写一个用户名 或者不填写任何东西都可以注册成功的，先来演示只输入一个用户名 就要可以注册成功的。 点击注册之后的页面， 再来演示 不输入的界面 点击注册的界面;\ 就会出现如下的结果： ---------------------------...
JavaScript实现表单中未选择或者未输入的控件进行提示（提示内容可自定义）
qq_44538205的博客
02-22 1768
在做实际的项目中突发奇想写的一个方法，可能有一些表单控件没有加入判断中去还望见谅 实例 msg设置需要提示的内容 &lt;input type="text" placeholder="请输入用户名" msg="请输入'用户名'" name="username" maxlength="16"&gt; JavaScript代码：方法循环表单中需要判断的控件提示后并且返回一个布尔
js解决浏览器自动填充账号密码
浮生飘血的专栏
09-16 7158
相信大家用过很多方法,比如密码框设为text,获取焦点后变为password或者页面加载清空密码框,甚至做个定时任务页面加载之后清空密码框,这些方法都用处不大,或者有很多缺陷,下面上方法 给页面设置隐藏域,这样浏览器即使填充也只是填充到隐藏域中,是不是很简单!!!!!!!!!!!!
【JS】【29】解决浏览器自动填充密码输入框的问题
aizhu4795的博客
06-19 909
前言：该文章仅为记录方法，原博写得很好，可直接查看原博。我在实际项目中觉得比较麻烦，直接自动填充就自动填充算了，并未做处理 正文： 1，使用HTML属性（autocomplete="off"） <input type="password" autocomplete="off"/> 由于自动填充这个特性是浏览器自己实现的，autocomplete这个属性也没有被...
js注册事件(绑定事件)
m0_63400611的博客
12-07 696
给元素添加事件,称为注册事件或者绑定事件 传统注册方式 利用on开头的事件onclick <button onclick = "alert('hi')"></button> btn.onclick = function() {} 特点:注册事件唯一,同一个元素同一个事件只能设置一个处理函数,后设置的处理函数会覆盖前面注册的处理函数 方法监听注册方式 w3c标准推荐方式 addEventListener()是一个方法 IE9之前的IE不支持此方法,可以使用attac
javaScript-06 表单验证 详细易懂，加案例分析
YZZdear的博客
03-29 1951
JavaScript表单验证，全网最详细
在表单数据变化时，重新校验表单并更新校验提示消息
最新发布
05-31
在表单数据变化时，您可以使用uni-app提供的watch监听器来监听表单数据的变化，然后通过调用validateField方法重新校验表单，并更新校验提示消息。以下是示例代码： ```javascript watch: { formData: { deep: true, handler: function (newVal) { // 重新校验表单 this.$refs.form.validateField('fieldName', err => { if (err) { // 更新校验提示消息 this.errorMessage = err.errors[0].message } else { this.errorMessage = '' } }) } } } ``` 其中，`formData`表示表单的数据对象，`fieldName`表示需要校验的表单项的字段名，`errorMessage`表示校验提示消息。在`validateField`方法的回调函数中，如果存在校验错误，则可以通过`err.errors[0].message`获取错误提示消息，然后更新到UI上。如果校验通过，则可以清空错误提示消息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值