登錄和注冊的彈出框的js驗證

有些字段是不能為空的，那么我們就要通過驗證判斷：用戶是否填寫。

此時就要用到j(luò)s驗證。

登錄

html

<form action="" method="post" name="form1" target="_blank" id="form1" onSubmit="return check_login()"> <h1>登錄</h1><input type="text" name="username" class="form-control" placeholder="手機(jī)/郵箱/用戶名" style="width: 30%;"><br> <br><input name="password" type="password" class="form-control" placeholder="密碼" style="width: 30%;" /><br> <br><!--滑動驗證--><div id="dragContainer" style="width: 30%;"><div id="dragBg"></div><div id="dragText"></div><div id="dragHandler" class="dragHandlerBg"></div></div><br> <br> <input type="submit" value="確定" style="color: white;background-color: blue;width: 30%;height: 40px;" /><br> <br> <div class="zhu"> <input type="button" value="注冊" style="background-color: white;border: none;"/> | <input type="button" value="忘記密碼" style="background-color: white;border: none;"/> </div></form>
要在自己寫的登錄頁面上加上表單form，然后添加 <form action="" method="post" name="form1" target="_blank" id="form1" onSubmit="return check_login()">

name、id和onSubmit自定義。

每一個input中都要有對應(yīng)的name。

然后寫js

js

function check_login() {if(document.form1.username.value==""){alert("請檢查手機(jī)/郵箱/用戶名是否為空！");return false;}if(document.form1.password.value==""){alert("請檢查您的密碼是否為空！");return false} }

函數(shù)的名字要跟onsubmit同步。

運行后的效果如下圖：

注冊界面道理同上，效果圖展示如下：

總結(jié)：

這是彈出框的驗證，我之后在研究下不用彈出框的驗證。

附上名言——

一個人是在對周圍生活環(huán)境的反抗中創(chuàng)造成功的。

總結(jié)

以上是生活随笔為你收集整理的js简单表单验证（弹出框）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。