Un exemple complet d'effet de tremblement de zone de texte lorsque jQuery implémente un formulaire dynamique validation

Un exemple complet d'effet de tremblement de zone de texte lorsque jQuery implémente un formulaire dynamique validation_jquery

WBOY

Libérer： 2016-05-16 15:43:46

original

1597 Les gens l'ont consulté

L'exemple de cet article décrit l'effet de tremblement de la zone de texte lorsque jQuery implémente la validation dynamique du formulaire. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

L'effet de vérification de formulaire dynamique implémenté par jQuery est utilisé ici. Lorsque l'utilisateur saisit une erreur ou ne saisit rien et clique sur le bouton Soumettre, la zone de saisie problématique tremblera plusieurs fois pour rappeler à l'utilisateur qu'il y a un problème. avec cet élément. La fonction de tremblement de zone de texte est intéressante, ce formulaire est relativement typique, vous pouvez vous y référer si vous souhaitez implémenter la fonction de formulaire jquery Ajax.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant :

<!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>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.