gpt4 book ai didi

javascript - 从表单获取值的困难

转载 作者:行者123 更新时间:2023-11-29 10:04:02 25 4
gpt4 key购买 nike

这里是初级开发人员。我正在尝试执行以下代码以获取表单中键入的所有信息并接收警报消息(“一切正常”)。

我知道有 Jquery valid() 函数,但我也很难实现它。所以如果有可能当文本框不符合发布错误消息的要求时(电子邮件需要“@”,网站需要"www.",名字6个字母,密码="****"。

任何人都可以用简单的代码解释我如何实现这一点吗?

<form id=registration_form action="" method="post">
<table>
<tr>
<td>Chose Username: </td>
<td>
<input type="text" class="form_text" id="form_username">
</td>
<td>
<span class="error_form" id="username_error_message"></span>
</td>
</tr>
<tr>
<td>Password: </td>
<td>
<input type="password" class="form_text" id="form_password">
</td>
<td>
<span class="error_form" id="password_error_message"></span>
</td>
</tr>
<tr>
<td>Retype Password: </td>
<td>
<input type="password" class="form_text" id="form_retype_password">
</td>
<td>
<span class="error_form" id="retype_password_error_message"></span>
</td>
</tr>
<tr>
<td>Email: </td>
<td>
<input type="text" class="form_text" id="form_email">
</td>
<td>
<span class="error_form" id="email_error_message"></span>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" class="sbmt_btn" value="Create Account">
</td>
<td></td>
</tr>
</table>
</form>

最佳答案

这是一个使用 jQuery Validation Plugin 的例子.就像在 form

上调用 .validate(); 一样简单
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>
<script type="text/javascript">
$("#commentForm").validate();
</script>
</head>

它涵盖了电子邮件、所需的输入验证等等。查看文档 here .

此外,使用插件的 submitHandler 选项,如果所有字段都被正确验证,您可以在提交时设置回调。在下面的示例中,我们使用它来调用 alert() 并显示消息 'Everythings Ok'


例子

$(document).ready(function() {
$("#commentForm").validate({
//we can use the handler to check if form is correctly validated
submitHandler: function(form) {
alert('Everythings Ok');
}
});
});
input[class="error"], textarea[class="error"] {
border: 1px solid #f00 !important;
}

.error{
margin: 5px;
color: #f00 !important;
}

/* To cover your additional requirement mentioned in the comments */
body {
background: lightblue url(http://images.all-free-download.com/images/graphiclarge/winter_background_311052.jpg) no-repeat fixed center;
}

/* For your additional requirement */
form {
background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>

<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>

使用 jQuery 执行此操作需要许多不同的验证技术,很可能包括其他库,如 Regex。该插件将所有这些聚合到一个插件中,可以跨多个页面重复使用。

关于javascript - 从表单获取值的困难,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47810357/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com