jQuery Easyui form 提交验证与 json数据返回结果的处理

最新推荐文章于 2021-06-17 03:01:15 发布

xueshandugu

最新推荐文章于 2021-06-17 03:01:15 发布

阅读量4.9k

点赞数

分类专栏： Juery easy ui

本文链接：https://blog.csdn.net/xueshandugu/article/details/28127053

版权

Juery easy ui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

简单实现：

		// 提交验证
		$(":submit").click(function(){
			if(!$("#form1").form("validate")){
				return false;
			}
		});	// 提交验证 end

ajax 实现：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>Basic DateBox - jQuery EasyUI Demo</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

    <link rel="stylesheet" type="text/css" href="myPlugin/jquery-easyui-1.3.6/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="myPlugin/jquery-easyui-1.3.6/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="myPlugin/jquery-easyui-1.3.6/demo/demo.css">
    <!-- <script type="text/javascript" src="myPlugin/jquery-easyui-1.3.6/jquery.min.js"></script> -->
    <script type="text/javascript" src="myPlugin/jquery-easyui-1.3.6/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="myPlugin/jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
    
    <!-- javascript -->
    <script type="text/javascript">
    // 自动加载方法  start
    $(document).ready(function(){
		// 表单验证 start
		// 邮件地址验证
		$('#emailId').validatebox({ 
		    required: true,
		    validType: 'email',
		    missingMessage: '邮件地址不能为空.',
		    invalidMessage:'请输入正确的邮件地址.'
		});		
		
		// 用户名验证
		$('#usernameId').validatebox({ 
			required: true,
			validType:['chinese','length[3,6]', 'aaa'],
			missingMessage: '用户名不能为空.'
		});		
		// 表单验证 end	
		
		// extends validatebox rules
		$.extend($.fn.validatebox.defaults.rules, {    
			chinese : {// 验证中文
					validator : function(value) {
						return /^[\u0391-\uFFE5]+$/i.test(value);
					},
					message : '请输入中文.'
				},
			length : {// 长度验证
					validator : function(value, param){
						var len = $.trim(value).length;
						return len >= param[0] && len <= param[1];
					},
					message : '内容长度介于{0}和{1}之间.'
			},
			aaa : {	// 随意定义了一个规则
					validator : function(value){
						return value == '雪山独孤';
					},
					message : '名字为[雪山独孤].'
			} 
		});	// end rules
		
		
		// 提交表单 start
		$('#ff').form({    
		    url:'testAction.do',    
		    onSubmit: function(param){	// 提交之前的回调函数。
		        param.email = '123@qq.com';	// 提交参数
		        param.username = 'Jacky';
		        
		        var isValid = $(this).form('validate');	// 提交验证
		        return isValid;  	// return false to prevent submit;   
		    },
		    success:function(data){		// 提交成功后的回调函数。
		        //alert(data);
		        var data = eval('(' + data + ')');  // change the JSON string to javascript object    
		        if (data.success){
		            alert(data.message);
		            alert(data.success);
		        }
		    }
		});    
		// 提交表单 end 
    
    });	// 自动加载方法  end
    </script>
  </head>
  
  <body>
  <form id="ff" method="post">
    <div style="margin-top:25px;"></div>
    <label>邮箱：</label><input id="emailId" style="width:200px;" />
           
	<div style="margin-top:25px;"></div>           
	<label>用户名：</label><input id="usernameId" style="width:200px;"/> 
	
	<div style="margin-top:25px;"></div>
	<input type="submit" value="提交"/>
  </form>
  </body>
</html>