如何检查表单的有效性？
我是网络开发新手，我试图修改此代码，以便如果上面的文本区域为空，则不允许单击任何注册或登录按钮，我很困惑在哪里编写将检查的 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();
});
});
<!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>
子衿沉夜2回答
-
ibeautiful
空输入字段.val()将是一个不含任何字符的字符串。不是一个null值。如果运行以下命令，您可以看到这一点console.log(typeof $('.pwd' ).val())// returns string您可以将代码更改为：reg-btn.click(function(e){ if($('.pwd' ).val().length > 0){ //form is valid } -
杨魅力
使用 id 而不是类，然后您想检查该值是否为空字符串<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..}
随时随地看视频慕课网APP
相关分类
Html5