Home>

Two pictures to use:

<! Doctype html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <title></title>
  <Script type="text/javascript" src="jquery.1.12.4.js"></script>
  <!-Jquery style->
  <script type="text/javascript">
    //email verification
    $(function () {
      //Call method when input tag gets focus/loses focus
      $(":input [name =" email "]"). blur (function () {
        //Get the input content
        var email=$(this) .val ();
        //The template for the given input content (email format template)
        var reg=/\w+[@]{1}\w+[.]\w+/;
        //Put the input content into the template,Make a judgment
        if (reg.test (email)) {
          //The format is correct:output "username is available"
          $(":input [name =" check-email "]"). val ("username is available");
          //The picture called when the declaration is correct
          image1="dui.gif";
          //Put the picture into the img tag
          $("#img1"). attr ("src", image1);
        } else {
          //Format error:output "Please fill in a valid email address"
          $(":input [name =" check-email "]"). val ("Please fill in a valid email address");
          //The picture called when the declaration is correct
          image1="cuo.gif";
          //Put the picture into the img tag
          $("#img1"). attr ("src", image1);
        }
      });
    });
    //name verification
    $(function () {
      $(":input [name =" name "]"). blur (function () {
        var name=$(this) .val ();
        //Judge the input content is greater than four characters
        if (name.length>4) {
          $(":input [name =" check-name "]"). val ("Entered correctly");
          image2="dui.gif";
          $("#img2"). attr ("src", image2);
        } else {
          $(":input [name =" check-name "]"). val ("Input information error");
          image2="cuo.gif";
          $("#img2"). attr ("src", image2);
        }
      });
    });
    //password verification-first time
    $(function () {
      $(":input [name =" password-one "]"). blur (function () {
        var name=$(this) .val ();
        //Determine if the password is greater than 6 characters
        if (name.length>6) {
          $(":input [name =" check-password-one "]"). val ("Password is available");
          image3="dui.gif";
          $("#img3"). attr ("src", image3);
        } else {
          $(":input [name =" check-password-one "]"). val ("Password is not available");
          image3="cuo.gif";
          $("#img3"). attr ("src", image3);
        }
      });
    });
    //password verification-second time
    $(function () {
      $(":input [name =" password-two "]"). blur (function () {
        var name1=$(":input [name =" password-one "]"). val ();
        var name2=$(this) .val ();
        //First determine whether the password is greater than 6 characters
        if (name2.length>6) {
          //Then determine if the passwords are the same twice
          if (name2 == name1) {
            $(":input [name =" check-password-two "]"). val ("password available");
            image4="dui.gif";
            $("#img4"). attr ("src", image4);
          } else {
            $(":input [name =" check-password-two "]"). val ("Password is not available");
            image4="cuo.gif";
            $("#img4"). attr ("src", image4);
          }
        } else {
          $(":input [name =" check-password-two "]"). val ("Password is not available");
          image4="cuo.gif";
          $("#img4"). attr ("src", image4);
        }
      });
    });
  </script>
  <!-Css style->
  <style type="text/css">
    img {width:15px;height:15px}
    .left {width:200px;text-align:right}
    .right {width:400px}
    .bjs {background-color:limegreen}
    .btn {margin:20px 0 0 300px}
  </style>
</head>
<body>
<h4>The following are required fields</h4>
<form>
  //table table style:border is 1, inner fill is 10, outer fill is 0
  <table border="1" cellpadding="10" cellspacing="0"&​​gt;
    <tr>
      <td>Please enter your email address:</td>
      <td>
        <input name="email">
        <img src="cuo.gif" />
        <input type="text" name="check-email" />
      </td>
    </tr>
    <tr>
      <td>Set your nickname on Dangdang:</td>
      <td>
        <input name="name">
        <img src="cuo.gif" />
        <input type="text" name="check-name" />
      </td>
    </tr>
    <tr>
      <td>Set password:</td>
      <td>
        <input name="password-one">
        <img src="cuo.gif" />
        <input type="text" name="check-password-one" />
      </td>
    </tr>
    <tr>
      <td>Enter the password you set again:</td>
      <td>
        <input name="password-two">
        <img src="cuo.gif" />
        <input type="text" name="check-password-two" />
      </td>
    </tr>
  </table>
  <input type="button" value="register" />
</form>
</body>
</html>
  • Previous Summary of three methods for Spring to inject Date types
  • Next Command summary for registering services under window
  • Trends