如何檢查表單的有效性？

Question

我是 web 開發的新手，我正在嘗試修改此代碼，因此如果上面的文本區域為空，它將不允許單擊任何注冊或登錄按鈕，我很困惑在哪里編寫將檢查的 if 語句那但我只知道JS的基礎知識而不知道一點關於jQuery，我嘗試添加以下內容

reg-btn.click(function(e){
     if($('.pwd' ).val() == null){
     alert("error");}
     else{ .....remaining code..}

但它沒有工作，有沒有辦法解決這個問題？ 原代碼來自： https://codepen.io/chouaibblgn45/pen/ZXKdXR?editors=1010

 "use strict"; $(document).ready(function () { /*------- button with class register -------*/ var reg_btn = $('.container.register'); reg_btn.click(function (e) { e.preventDefault(); $(this).siblings('.reg').css({ 'transform': 'translateY(40%) scale(5)', 'border-radius': '0', 'width': '100%', 'height': '100%' }).end(); reg_btn.siblings('.container h3:nth-of- type(1)').css({ 'top': '40%', 'z-index': '8', }).end().end(); }); });

 * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'Open Sans', sans-serif; background: #e2e2e2; } svg { position: fixed; top: 10px; left: 180px; }.container { position: relative; top: 200px; left: 35%; display: block; margin-bottom: 80px; width: 500px; height: 360px; background: #fff; border-radius: 5px; overflow: hidden; z-index: 1; } h2 { padding: 40px; font-weight: lighter; text-transform: uppercase; color: #414141; } input { display: block; height: 50px; width: 90%; margin: 0 auto; border: none; } input::placeholder { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition: .5s; transition: .5s; } input:hover, input:focus, input:active:focus { color: #ff5722; outline: none; border-bottom: 1px solid #ff5722; } input:hover::placeholder, input:focus::placeholder, input:active:focus::placeholder { color: #ff5722; position: relative; -webkit-transform: translateY(-20px); transform: translateY(-20px); }.email, .pwd { position: relative; z-index: 1; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-left: 20px; font-family: 'Open Sans', sans-serif; text-transform: uppercase; color: #858585; font-weight: lighter; -webkit-transition: .5s; transition: .5s; }.link { text-decoration: none; display: inline-block; margin: 27px 28%; text-transform: uppercase; color: #858585; font-weight: lighter; -webkit-transition: .5s; transition: .5s; } button { cursor: pointer; display: inline-block; float: left; width: 250px; height: 60px; margin-top: -10px; border: none; font-family: 'Open Sans', sans-serif; text-transform: uppercase; color: #fff; -webkit-transition: .5s; transition: .5s; } button:nth-of-type(1) { background: #673ab7; } button:nth-of-type(2) { background: #ff5722; } button span { position: absolute; display: block; margin: -10px 20%; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: .5s; transition: .5s; } button:hover span { -webkit-transform: translateX(30px); transform: translateX(30px); }.reg { position: absolute; top: 0; left: 0; -webkit-transform: translateY(-100%) scale(1); transform: translateY(-100%) scale(1); display: block; width: 20px; height: 20px; border-radius: 50px; background: #673ab7; z-index: 5; -webkit-transition: .8s ease-in-out; transition: .8s ease-in-out; } h3 { position: absolute; top: -100%; left: 20%; text-transform: uppercase; font-weight: bolder; color: rgba(255, 255, 255, 0.3); -webkit-transition: .3s ease-in-out 1.2s; transition: .3s ease-in-out 1.2s; }

 <?DOCTYPE html> <html> <head> <head> <body> <div class="container"> <h2>login</h2> <form> <input type="text" class="email" placeholder="email"> <br/> <input type="text" class="pwd" placeholder="password"> </form> <a href="#" class="link"> forgot your password ? </a> <br/> <button class="register"> <span>register</span> </button> <button class="signin"> <span>sign in</span> </button> <h3>your registration is complete ! </h3> <h3>your sign in is complete !</h3> <div class="reg"></div> <div class="sig"></div> </div> </body> </html>

Answer 1

使用 id 而不是 class 然后您要檢查該值是否為空字符串

<input type="text" id="email" class="email" placeholder="email">
 <br/>
<input type="text" id="pwd" class="pwd" placeholder="password">

並在 JS

reg-btn.click(function(e){
 if($('#pwd' ).val() === ''||$('#email').val()===''){
 alert("Please Fill Required Fields");}
 else{ .....remaining code..}

Answer 2

空輸入字段的.val()將是一個沒有字符的字符串。 不是null值。

如果您運行以下命令，您可以看到這一點

console.log(typeof $('.pwd' ).val())
// returns string

您可以將代碼更改為：

reg-btn.click(function(e){
     if($('.pwd' ).val().length > 0){
        //form is valid
    }

如何檢查表單的有效性？

問題描述

2 個解決方案

解決方案1
2 已采納 2020-04-06 14:14:44

解決方案2
2 2020-04-06 14:19:14

如何檢查表單的有效性？

問題描述

2 個解決方案

解決方案1 2 已采納 2020-04-06 14:14:44

解決方案2 2 2020-04-06 14:19:14

解決方案1
2 已采納 2020-04-06 14:14:44

解決方案2
2 2020-04-06 14:19:14