어떻게 jQuery를 이용하여 간단한 폼 검증을 진행합니까

어떻게 jQuery를 이용하여 간단한 폼 검증을 진행합니까? jQuery를 이용하여 폼 검증을 할 수 있습니다. 물론 비교적 복잡한 폼 검증이 있습니다. 여기서 소개하지 않겠습니다. 다음은 어떻게 jQuery를 사용하여 간단한 폼 검증을 하는지 간단하게 소개한 다음에 여러분은 기본적인 표현 검증을 개조할 수 있습니다.먼저 코드 인스턴스 세그먼트를 봅니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>    </title>
<style type="text/css">
body {
    font-size: 11px
}
#divLogin {
    margin: 15% 0 0 15%
}
#divLogin fieldset {
    width: 300px;
    padding: 0px;
    margin: 0px
}
#divLogin fieldset h3 {
    margin: 0px;
    padding: 5px;
    background-color: #eee
}
#divLogin fieldset .content {
    padding: 20px;
    line-height: 2.6em
}
#divLogin fieldset .content .btnCenter {
    text-align: center
}
.txt {
    border: #666 1px solid;
    padding: 2px;
    width: 180px;
    margin-right: 3px
}
.btn {
    border: #666 1px solid;
    padding: 2px;
    width: 60px;
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#ECE9D8)
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $("#Button1").click(function() { //      
         var $name = $("#txtName"); //   
         var $pass = $("#txtPass"); //  
         if ($name.val() == "") 
        {
            alert("       !");
            $name.focus();
            return false;
         } 
         else 
        {
            alert("      !");
            $pass.focus();
            return false;
         }
      })
   })
</script>
</head>
<body>
<div id="divLogin">
  <fieldset>
    <h3>    </h3>
    <div class="content">
      <div>  ：
        <input id="txtName" type="text" class="txt" />
      </div>
      <div>  ：
        <input id="txtPass" type="password" class="txt"/>
      </div>
      <div class="btnCenter">
        <input id="Button1" type="button" value="  " class="btn" />
        <input id="Reset1" type="reset" value="  " class="btn" />
      </div>
    </div>
  </fieldset>
</div>
</body>
</html>

상기 코드는 기본적인 폼 검증 기능을 실현했고 물론 계속 복잡해질 수도 있고 페이지를 더욱 아름답게 할 수도 있으며 앞으로 천천히 소개할 것이다.
원래 주소:http://www.51texiao.cn/jqueryjiaocheng/2015/0504/669.html

어떻게 jQuery를 이용하여 간단한 폼 검증을 진행합니까

좋은 웹페이지 즐겨찾기