Ein vollständiges Beispiel für den Textfeld-Shaking-Effekt, wenn jQuery das dynamische Formular validation

Ein vollständiges Beispiel für den Textfeld-Shaking-Effekt, wenn jQuery das dynamische Formular validation_jquery implementiert

WBOY

Freigeben： 2016-05-16 15:43:46

Original

1551 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt den Effekt des Textfeldschüttelns, wenn jQuery die dynamische Formularvalidierung implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der von jQuery implementierte dynamische Formularüberprüfungseffekt wird hier verwendet. Wenn der Benutzer einen Fehler eingibt oder nichts eingibt und auf die Schaltfläche „Senden“ klickt, wackelt das problematische Eingabefeld einige Male, um den Benutzer daran zu erinnern, dass ein Problem vorliegt Mit diesem Element ist die Funktion zum Schütteln von Textfeldern interessant. Dieses Formular ist relativ typisch. Sie können darauf zurückgreifen, wenn Sie die Ajax-Formularfunktion von jquery implementieren möchten.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-table-txt-check-shake-style-codes/

Der spezifische Code lautet wie folgt:

<!DOCTYPE html>
<head>
<title>jQuery动态表单验证效果</title>
<style type="text/css">
body
{
 font-family:Arial, Sans-Serif;
 font-size:0.85em;
}
img 
{
 border:none;
}
ul, ul li
{
 list-style-type: none;
 margin: 0;
 padding: 0;
}
ul li.first
{
 border-top: 1px solid #DFDFDF;
}
ul li.last
{
 border: none;
}
ul p
{
 float: left;
 margin: 0;
 width: 310px;
}
ul h3
{
 float: left;
 font-size: 14px;
 font-weight: bold;
 margin: 5px 0 0 0;
 width: 200px;
 margin-left:20px;
}
ul li
{
 border-bottom: 1px solid #DFDFDF;
 padding: 15px 0;
 width:600px;
 overflow:hidden;
}
ul input[type="text"], ul input[type="password"]
{
 width:300px;
 padding:5px;
 position:relative;
 border:solid 1px #666;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
}
ul input.required 
{
 border: solid 1px #f00;
}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
 $("#signup").click(function() {
 resetFields();
 var emptyfields = $("input[value=]");
 if (emptyfields.size() > 0) {
  emptyfields.each(function() {
  $(this).stop()
   .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
   .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
   .animate({ left: "0px" }, 100)
   .addClass("required");
  });
 }
 });
});
function resetFields() {
 $("input[type=text], input[type=password]").removeClass("required");
}
</script>
</head>
<body>
 <ul>
 <li class="first">
  <h3>您的名字：</h3>
  <p><input type="text" value="First and Last name" id="name" name="name" /></p>
 </li>
 <li>
  <h3>Email地址：</h3>
  <p><input type="text" value="my@email.com" name="email" /></p>
 </li>
 <li>
  <h3>密码：</h3>
  <p><input type="password" name="passwd" /></p>
 </li>
 <li>
  <h3>密码确认：</h3>
  <p><input type="password" name="passwd_conf" /></p>
 </li>
 <li>
  <h3>用户名：</h3>
  <p><input type="text" value="MyUserName" id="userName" name="user_name" /></p>
 </li>
 <li class="last">
  <a id="signup" href="#"><img src="images/buttonsubmit.png" style="vertical-align:middle;" /></a><img src="images/clickhere.png" style="vertical-align:middle;" />
 </li>
 </ul>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.