JQuery+Asp.net MVC實現使用者名稱重名查詢
之前寫過一篇Post用Ajax查詢使用者名稱是否重名,這次我們用JQuery的外掛validate來實現,更加簡單,相比之前用xmlhttprequest來說,不用考慮瀏覽器相容的問題,這也是使用是Jquery這個輕量級框架的特點之一。
此處用的是ASP.NET MVC RC,aspx程式碼如下:
此處用的是ASP.NET MVC RC,aspx程式碼如下:
@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestValidation1.aspx.cs" Inherits="DemoMVCForm.Views.FormDemo.TestValidation1" %>
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>Demotitle>
<script src="http://www.cnblogs.com/Scripts/jquery-1.2.6.min.js" type="text/javascript">script>
<script src="http://www.cnblogs.com/Scripts/jquery.validate.js" type="text/javascript">script>
<script type="text/javascript">
$(document).ready(function() {
$("#form-sign-up").validate({
rules: {
login: {
required: true,
//here invoke related action
remote: ''
}
},
messages: {
login: {
required: "請輸入使用者名稱",
remote: jQuery.format("{0} 已經有人用了")
}
},
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
}
});
});
script>
head>
<body>
<form action="Register", "FormDemo")%>" method="post" id="form-sign-up">
<h1>Demo表單h1>
<table id="inputArea">
<tr>
<td>使用者名稱 (試試輸入 Petter):td>
<td><input type="text" name="login" id="login" />td>
tr>
<tr>
<td colspan="2" align="center"><br /><input type="submit" />td>
tr>
table>
form>
body>
html>
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>Demotitle>
<script src="http://www.cnblogs.com/Scripts/jquery-1.2.6.min.js" type="text/javascript">script>
<script src="http://www.cnblogs.com/Scripts/jquery.validate.js" type="text/javascript">script>
<script type="text/javascript">
$(document).ready(function() {
$("#form-sign-up").validate({
rules: {
login: {
required: true,
//here invoke related action
remote: ''
}
},
messages: {
login: {
required: "請輸入使用者名稱",
remote: jQuery.format("{0} 已經有人用了")
}
},
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
}
});
});
script>
head>
<body>
<form action="Register", "FormDemo")%>" method="post" id="form-sign-up">
<h1>Demo表單h1>
<table id="inputArea">
<tr>
<td>使用者名稱 (試試輸入 Petter):td>
<td><input type="text" name="login" id="login" />td>
tr>
<tr>
<td colspan="2" align="center"><br /><input type="submit" />td>
tr>
table>
form>
body>
html>
Asp.net MVC支援Json,所有返回Json的結果,直接使用是JsonResult,看程式碼cs,很簡單:
cs
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--> ///
/// FormDemoController
///
/// Author : PetterLiu 2009-1-12 17:20 DEV-LIUJUNYUAN
public class FormDemoController : Controller
{
public JsonResult IsLoginAvailable(string login)
{
//TODO: Do the validation
JsonResult result = new JsonResult();
if (login == "Petter")
result.Data = false;
else
result.Data = true;
return result;
}
}
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--> ///
/// FormDemoController
///
///
public class FormDemoController : Controller
{
public JsonResult IsLoginAvailable(string login)
{
//TODO: Do the validation
JsonResult result = new JsonResult();
if (login == "Petter")
result.Data = false;
else
result.Data = true;
return result;
}
}
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/12639172/viewspace-545674/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- mysql之查詢使用者名稱MySql
- jQuery的Ajax方法實現註冊郵箱時使用者名稱查詢jQuery
- 根據使用者名稱和密碼查詢使用者密碼
- 查詢跟蹤檔名稱
- mybatis入門程式:mybatis根據使用者名稱稱模糊查詢使用者資訊MyBatis
- Linux裝置名稱的查詢Linux
- 使用javascript實現使用者名稱驗證JavaScript
- 商城-使用者註冊-根據使用者名稱和密碼查詢使用者密碼
- javascript通過名稱空間放置全域性變數重名JavaScript變數
- 檢查使用者名稱是否使用介面
- Vue檢查使用者名稱是否使用Vue
- Java+Ajax實現使用者名稱重複檢驗Java
- 通過jquery實現記住使用者名稱密碼jQuery密碼
- 由allocation_unit_id查詢其所屬物件名稱物件
- Laravel 實現使用者名稱 + 郵箱 + 手機號登入Laravel
- 檢視檔名稱和查詢檔案中所含字串字串
- C# 根據前臺傳入實體名稱,動態查詢資料C#
- 17.django新增檢查使用者名稱和手機號數量介面+vue檢查使用者名稱,手機號是否重複DjangoVue
- 查詢當前資料庫名、使用者名稱、資料庫伺服器IP、埠、資料庫版本資訊。資料庫伺服器
- Access查詢實現Mysql的 limit 查詢MySqlMIT
- ajax實現的驗證使用者名稱是否存在程式碼例項
- 查詢 Linux 發行版名稱、版本和核心詳細資訊Linux
- 透過sql查詢獲得當前session的trace檔名稱SQLSession
- java實現折半查詢。Java
- 查詢演算法集:順序查詢、二分查詢、插值查詢、動態查詢(陣列實現、連結串列實現)演算法陣列
- html+JS+php實現簡單的註冊使用者名稱驗證HTMLJSPHP
- 實現 使用者名稱或郵箱等 任意一個欄位均可登入
- github修改使用者名稱Github
- oracle更改使用者名稱Oracle
- 快速修改Oracle使用者名稱Oracle
- 海量使用者註冊整合布隆過濾器實現使用者名稱唯一功能過濾器
- c++11-17 模板核心知識(十三)—— 名稱查詢與ADLC++
- SSH:hiberate實現資料的查詢(單查詢和全查詢)
- 物件前面是使用者名稱還是schema名!物件
- 查詢指定使用者的unique,primary索引名/鍵值索引
- oracle trace檔名查詢Oracle
- DIY 實現 ThinkPHP 核心框架(四)名稱空間PHP框架
- Multipath實現LUN裝置名稱的持久化持久化