zoukankan      html  css  js  c++  java
  • 关于jQuery表单校验

    <style>
    .red{border: 1px solid red;}
    .wrong-tip{color: red;}
    </style>
    

      

    <form action="http://fanyi.baidu.com/">
    昵称:<input type="text" class="name"> 密码:<input type="password" class="password"><br/><br/>
    <div class="wrong-tip"></div>
    <input type="submit" value="提交" class="submit" />
    </form>
    

      

    <script type="text/javascript" src="js/jquery.min.js"></script>
    		<script>
    			$(function() {
    				var ok1 = false;
    				var ok2 = false;
    
    				function check1() {
    					if($(".name").val().length >= 3 && $(".name").val().length <= 12 && $(".name").val() != '') {
    						$(".name").removeClass("red");
    						$(".wrong-tip").html("");
    						ok1 = true;
    					} else {
    						$(".name").addClass("red");
    						$(".wrong-tip").html("用户名应该为3-20位之间!");
    						ok1 = false;
    					}
    				}
    
    				function check2() {
    					if($(".password").val().length >= 6 && $(".password").val().length <= 20 && $(".password").val() != '') {
    						$(".password").removeClass("red");
    						$(".wrong-tip").html("");
    						ok2 = true;
    					} else {
    						$(".password").addClass("red");
    						$(".wrong-tip").html("密码应该为6-20位之间!");
    						ok2 = false;
    					}
    				}
    
    				$(".name").blur(function() {
    					check1();
    				})
    				$(".password").blur(function() {
    					check2();
    				})
    
    				$(".submit").click(function() {
    					check1();
    					check2();
    					if(ok1 && ok2) {
    						return true;
    						//如果用的是模拟按钮,则用这个。 $('form').submit();
    					} else {
    						return false;
    					}
    				})
    			})
    		</script>
    

     以前觉得表单校验好难,今天终于弄明白了。

  • 相关阅读:
    P3350 [ZJOI2016]旅行者
    P4178 Tree
    P2375 [NOI2014]动物园
    P2827 蚯蚓
    1002: [FJOI2007]轮状病毒
    1070: [SCOI2007]修车
    AtCoder Grand Contest 021完整题解
    Running to the End(Codeforces & AtCoder 百套计划)
    SDWC2017游记
    非传统题初探——AtCoder Practice Contest #B
  • 原文地址:https://www.cnblogs.com/xuemingyao/p/6023669.html
Copyright © 2011-2022 走看看