您的位置:首页 > Web前端 > JQuery

使用jQuery.Validate(2)

2008-12-25 20:08 375 查看
using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace Web.Ajax.Validate

{

public partial class AjaxLogin : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (Request["user"] != null && Request["password"] != null)

{

string rtn = "";

if (Request["user"] == "admin" && Request["password"] == "admin")

{

rtn = "Login success !";

}

else

{

rtn = "Your user or password is wrong (must be admin).";

}

Response.Clear();

Response.Write(rtn);

Response.End();

}

}

}

}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxLogin.aspx.cs" Inherits="Web.Ajax.Validate.AjaxLogin" %>

<!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>

<title></title>

<style type="text/css">

body, div { font-family: 'lucida grande', helvetica, verdana, arial, sans-serif }

.warning { color: red; }

form{margin:0;padding:0;}

fieldset {padding:8px;width:688px;}

legend {padding:0;color:#000;}

input, textarea, select {margin:0;font-size:100%;font-family:inherit;width:168px;border:1px solid #A3C6D4;}

select { padding: 0; }

form.cmxform {width:370px;font-size:1.0em;color:#333;}

form.cmxform label.error, label.error {color: red;font-style: italic}

div.error { display: none; }

input:focus { border: 1px dotted black; }

input.error { border: 1px solid red; }

form.cmxform .gray * { color: gray; }

</style>

<script src="http://www.cnblogs.com/scripts/jquery.js" type="text/javascript"></script>

<script src="http://www.cnblogs.com/scripts/jquery.form.js" type="text/javascript"></script>

<script src="http://www.cnblogs.com/scripts/jquery.validate.js" type="text/javascript"></script>

<script src="http://www.cnblogs.com/scripts/cmxforms.js" type="text/javascript"></script>

<script type="text/javascript">

jQuery(function() {

// show a simple loading indicator

var loader = jQuery('<div id="loader"><img src="http://images.cnblogs.com/loading.gif" alt="loading" /></div>')

.css({ position: "relative", top: "1em", left: "25em" })

.appendTo("body")

.hide();

jQuery().ajaxStart(function() {

loader.show();

}).ajaxStop(function() {

loader.hide();

}).ajaxError(function(a, b, e) {

throw e;

});

var v = jQuery("#form").validate({

submitHandler: function(form) {

jQuery(form).ajaxSubmit({

target: "#result"

});

}

});

jQuery("#reset").click(function() {

v.resetForm();

});

});

</script>

</head>

<body>

<form method="post" class="cmxform" id="form" action="ajaxlogin.aspx">

<fieldset>

<legend>Login Form (Enter "admin" as password)</legend>

<p>

<label for="user">Username</label>

<input id="user" name="user" title="Please enter your username (at least 3 characters)" class="required" minlength="3" />

</p>

<p>

<label for="pass">Password</label>

<input type="password" name="password" id="password" class="required" minlength="5" />

</p>

<p>

<input class="submit" type="submit" value="Login"/>

</p>

</fieldset>

</form>

<div id="result">Please login!</div>

<br/>

<button id="reset">Programmatically reset above form!</button>

</body>

</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: