jquery+validate+blockUI小例子_validateblock()-CSDN博客

本文链接：https://blog.csdn.net/leadway123/article/details/47000753

<html> 
<head> 
<title>jQuery Ajax 实例演示</title> 
</head> 
<!-- 引入js文件，注意路径 -->
<script src="jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="jquery.blockUI.js" type="text/javascript"></script>

<script type="text/javascript">
        $(function(){
            var validate = $("#myform").validate({
                debug: true, //调试模式取消submit的默认提交功能   
                //errorClass: "label.error", //默认为错误的样式类为：error   
                focusInvalid: false, //当为false时，验证无效时，没有焦点响应  
                onkeyup: false,   
                submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form   
					login();
				   // alert("提交表单");   
                    //form.submit();   //提交表单   
                },   
                
                rules:{
                    myname:{
                        required:true
                    },
                    email:{
                        required:true,
                        email:true
                    },
                    password:{
                        required:true,
                        rangelength:[3,10]
                    },
                    confirm_password:{
                        equalTo:"#password"
                    }                    
                },
                messages:{
                    myname:{
                        required:"必填"
                    },
                    email:{
                        required:"必填",
                        email:"E-Mail格式不正确"
                    },
                    password:{
                        required: "不能为空",
                        rangelength: $.format("密码最小长度:{0}, 最大长度:{1}。")
                    },
                    confirm_password:{
                        equalTo:"两次密码输入不一致"
                    }                                    
                }
                          
            });    
    
        });

function login()
{ //函数 login(); 
	var username = $("#myname").val();//取框中的用户名 
	var password = $("#password").val();//取框中的密码 
	$.ajax({ //一个Ajax过程 
		type: "post", //以post方式与后台沟通 
		url : "login.php", //与此php页面沟通 
		dataType:'json',//从php返回的值以 JSON方式 解释 
		beforeSend:function(){  
                                 $.blockUI({ message: '<h1><img src="loading.gif" /> 数据提交中...</h1>' });
                            },  
        complete: function() {  
                                  $.unblockUI(); 
                            } ,
		data: 'username='+username+'&password='+password, //发给php的数据有两项，分别是上面传来的u和p 
		success: function(json){//如果调用php成功 
		//alert(json.username+'\n'+json.password); //把php中的返回值（json.username）给 alert出来 
		$('#result').html("姓名:" + json.username + "<br/>密码:" + json.password); //把php中的返回值显示在预定义的result定位符位置 
		} 
	}); 
}
</script>

<style type="text/css">
	 
	label.error {
		color: red;/*错误信息的颜色*/
	}
	 
  </style>
<body> 
<div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div> 
 <form id="myform" method="post" action="">
            <p>
                <label for="myname">用户名：</label>
                <!-- id和name最好同时写上 -->
                <input id="myname" name="myname" />
            </p>
            <p>
                <label for="email">E-Mail：</label>
                <input id="email" name="email" />
            </p>
            <p>
                <label for="password">登陆密码：</label>
                <input id="password" name="password" type="password" />
            </p>
            <p>
                <label for="confirm_password">确认密码：</label>
                <input id="confirm_password" name="confirm_password" type="password" />
            </p>
            <p>
                <input class="submit" type="submit" value="立即注册" />
            </p>
        </form>
 
 
</body> 
</html>

<pre name="code" class="php"><?php 
mysql_connect("localhost","root","");
mysql_select_db("db");
$username = $_REQUEST['username'];
$password = $_REQUEST['password'];

$sql = "insert into t set username='$username',password='$password'";
mysql_query($sql);
echo json_encode(array ('username'=>$_REQUEST['username'],'password'=>$_REQUEST['password'])); 
?>