怎么用javascript实现前端验证

发布时间：2023-07-28 09:30:37 所属栏目：教程来源：网络

导读： 　　本篇内容主要讲解“如何用javascript实现前端验证”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何用javascript实

　　本篇内容主要讲解“如何用javascript实现前端验证”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何用javascript实现前端验证”吧!

　　用javascript实现前端验证的方法：1、创建一个用户注册的HTML页面；2、通过form表单定义两个文本框；3、通过js代码“function checkPass(){if(document.getElementById("p").value!=document.getElementById("cp").value){...}”对文本框内容进行验证即可。

　　使用Javascript进行前端验证：

　　设计简单的用户注册页面，其中包括“请输入密码”和“请再次输入密码”两个文本框

　　使用Javascript对“请输入密码”和“请再次输入密码”两个文本框的内容进行验证，如果两个文本框的内容不一样则显示“两次输入的密码不一致！”对话框。

　　（1）设计简单的用户注册页面，其中包括“请输入密码”和“请再次输入密码”两个文本框；

　　（2）使用Javascript对“请输入密码”和“请再次输入密码”两个文本框的内容进行验证，如果两个文本框的内容不一样则显示“两次输入的密码不一致！”对话框。

　　先来看看效果：

　　<!DOCTYPE html>

　　<html>

　　    <script type="text/javascript">

　　        function checkPass(){

　　            if(document.getElementById("p").value!=document.getElementById("cp").value){

　　        document.getElementById("war").style.display = "block";

　　        }

　　        }

　　

　　

　　    </script>

　　    <head>

　　        <meta charset="UTF-8">

　　        <title>注册</title>

　　        <link rel="stylesheet" type="text/css" href="Login.css"/>

　　    </head>

　　    <body>

　　        <div id="login">

　　            <h2>注册</h2>

　　            <form method="post">

　　            <input type="text" required="required" placeholder="用户名" name="u"></input>

　　            <input type="password" required="required" placeholder="请输入密码" name="p" id="p"></input>

　　            <input type="password" required="required" placeholder="请再次输入密码" name="cp" id="cp" onblur="checkPass()"></input>

　　            <span id="war" style="display:none"> 两次密码的输入不一致 </span>

　　            <button type="submit">登录</button>

　　            </form>

　　        </div>

　　    </body>

　　</html>

　　html{

　　    overflow: hidden;

　　    font-style: sans-serif;

　　   }

　　   body{

　　    font-family: 'Open Sans',sans-serif;

　　    margin: 0;

　　    background-image: url(1.jpg);

　　    background-position: 0 -90px;

　　    background-size: cover;

　　   }

　　   #login{

　　    position: absolute;

　　    top: 45%;

　　    left:50%;

　　    margin: -150px 0 0 -150px;

　　    width: 300px;

　　    height: 300px;

　　   }

　　   #login h2{

　　    color: #fff;

　　    text-shadow:0 0 6px;

　　    letter-spacing: 1px;

　　    text-align: center;

　　   }

　　   h2{

　　    font-size: 2em;

　　    margin: 0.67em 0;

　　   }

　　   input{

　　    width: 278px;

　　    height: 18px;

　　    margin-bottom: 10px;

　　    outline: none;

　　    padding: 10px;

　　    font-size: 13px;

　　    color: #fff;

　　    text-shadow:0px 0px 0.5px;

　　    border-top: 1px solid #312E3D;

　　    border-left: 1px solid #312E3D;

　　    border-right: 1px solid #312E3D;

　　    border-bottom: 1px solid #56536A;

　　    border-radius: 4px;

　　    background-color: #2D2D3F;

　　   }

　　#war{

　　 position:absolute;

　　 color:red;

　　    margin: 0em 4em;

　　    writing-mode: horizontal-tb;

　　 font-size: 8px;

　　 }

　　   .but{

　　    width: 300px;

　　    min-height: 20px;

　　    margin-top: 20px;

　　    display: block;

　　    background-color: #4a77d4;

　　    border: 2px solid #3762bc;

　　    color: #fff;

　　    padding: 9px 18px;

　　    font-size: 18px;

　　    line-height: normal;

　　   }

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!