validate表单验证和提交
/*-----html----*/
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="test_Default3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/validator.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/JScript.js" type="text/javascript"></script>
</head>
<body>
<form id="signupform">
<table>
<tr>
<td>
姓名：
</td>
<td >
<input id="txtName" name="txtName" type="text" />
</td>
<td class="status">
</td>
</tr>
<tr>
<td>
密码：
</td>
<td >
<input id="txtPwd" name="txtPwd" type="text" />
</td>
<td class="status">
</td>
</tr>
<tr>
<td>
确认密码：
</td>
<td >
<input id="txtPwd2" name="txtPwd2" type="text" />
</td>
<td class="status">
</td>
</tr>
<tr>
<td>
年龄：
</td>
<td>
<input id="txtAge" name="txtAge" type="text" />
</td>
<td class="status">
</td>
</tr>
<tr>
<td>
邮箱：
</td>
<td >
<input id="txtEmail" name="txtEmail" type="text" />
</td>
<td class="status">
</td>
</tr>
<tr>
<td>
电话：
</td>
<td>
<input id="txtPhone" name="txtPhone" type="text" />
</td>
<td class="status">
</td>
</tr>
<tr>
<td>
Url：
</td>
<td >
<input id="txtUrl" name="txtUrl" type="text" />
</td>
<td class="status">
</td>
</tr>
<tr>
<td>
身份证
</td>
<td>
<input id="txtCard" name="txtCard" type="text" />
</td>
<td class="status">
</td>
</tr>
<tr>
<td>
</td>
<td class="field" colspan="2">
<input id="Submit1" type="submit" value="submit" />
</td>
</tr>
</table>
<hr />
<div id="divMsg">
</div>
</form>
</body>
</html>
/*--------javascript-------*/
$.validator.setDefaults({
submitHandler: function () {
var key = new Array();
var kVal = new Array();
$.ajax({
type: "POST", // "POST",
contentType: "application/json",
url: "WebService.asmx/AddUserTB",
data: "{Name:'" + $("#txtName").val() + "', Pwd:'" + $("#txtPwd").val() + "', Email:'" + $("#txtEmail").val() + "', Url:'" + $("#txtUrl").val() + "', Mobile:'" + $("#txtPhone").val() + "'}",
dataType: "json",
success: function loadDataResult(result) {
$("#divMsg").html(result.d);
//alert(result.d);
// if (result.d == "成功") {
// alert('哈哈');
// } else {
// alert('555');
// }
}
//error: function () { $("#testdiv").text("error") }
});
}
});
$(document).ready(function () {
//$("#form1").validate();
$("#signupform").validate({
debug: true,
errorPlacement: function (error, element) {
if (element.is(":radio"))
error.appendTo(element.parent().next().next());
else if (element.is(":checkbox"))
error.appendTo(element.next());
else
error.appendTo(element.parent().next());
},
rules: {
txtName: {
required: true,
maxlength: 6,
minlength: 6
},
txtPwd: {
required: true,
minlength: 6
},
txtPwd2: {
required: true,
minlength: 6,
equalTo: "#txtPwd"
},
txtAge: {
required: true,
digits: true
},
txtEmail: {
required: true,
email: true
},
txtPhone: "required",
txtUrl: "required",
txtCard: "required"
},
messages: {
txtName: {
required: "姓名必填！",
maxlength: "最长6位",
minlength: "最短6位"
},
txtPwd: {
required: "密码必填",
minlength: "最少6位"
},
txtPwd2: {
required: "确认密码必填",
minlength: "最少6位",
equalTo: "两次密码不一致"
},
txtAge:
{
required: "年龄必填！",
digits: "只能输入整数"
},
txtEmail:
{
required: "邮箱必填！",
email: "邮箱格式错误"
},
txtPhone: "电话必填！",
txtUrl: "Url必填！",
txtCard: "身份证必填！"
},
success: function (label) {
// set as text for IE
label.html(" ").addClass("checked");
}
});
});
/*-------css------*/
.onShow
{
background:url(../images/onShow.gif) no-repeat;
padding-left:25px;
font-size: 12px;
line-height:22px;
vertical-align:middle;
}
.onFocus
{
background:#E9F0FF url(../images/onFocus.gif) no-repeat;
padding-left:25px;
font-size: 12px;
line-height:22px;
vertical-align:middle;
}
.onError
{
background:#FFF2E9 url(../images/onError.gif) no-repeat;
padding-left:25px;
font-size: 12px;
line-height:22px;
vertical-align:middle;
}
.onCorrect
{
background:#E9FFEB url(../images/onCorrect.gif) no-repeat;
padding-left:25px;
font-size: 12px;
line-height:22px;
vertical-align:middle;
}
.onLoad
{
background:#E9FFEB url(../images/onLoad.gif) no-repeat 3px 3px;
padding-left:25px;
font-size: 12px;
line-height:22px;
vertical-align:middle;
}
#signupform label.error {
background:url("../images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
font-size:12px;
}
#signupform label.checked {
background:url("../images/checked.gif") no-repeat 0px 0px;
}
/*-----数组-----*/
data: "{user:[{Name:'" + $("#txtName").val() + "',Pwd:'" + $("#txtPwd").val() + "',Email:'" + $("#txtEmail").val() + "',Url:'" + $("#txtUrl").val() + "',Mobile:'" + $("#txtPhone").val() + "'}]}",
调用
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string AddUserTB(Dictionary<string,string> [] user)
{
DataTable dt = users.fillTb();
DataRow dr = dt.NewRow();
foreach (Dictionary<string, string> u in user)
{
foreach (string key in u.Keys)
{
dr[key] = u[key];
}
}
dt.Rows.Add(dr);
string result = users.Add(dt);
if (result.Contains("CUS"))
{
return "成功";
}
else
{
return "失败";
}
}
