解析簡單自定義實現jQuery驗證

2024-09-06 20:04:43

字體：大中小

來源：轉載

供稿：網友

分兩種情況驗證，一是直接使用本地驗證，二是ajax到服務器驗證。

我現在需要驗證：用戶名，郵箱，電話三個input(text)，用戶名、電話號碼只需要本地驗證格式，只要匹配給定的正則表達式即可，而郵箱首先在本地驗證格式，符合格式則ajax到服務器驗證是否已被注冊，如果被注冊了則不能通過驗證。

對于每個input后面跟隨三種狀態，分別表示驗證通過、驗證未通過、正在提交服務器驗證，當未通過驗證時，還出示提示信息。

首先設計服務器端的郵箱驗證，這里使用.ashx 文件。

<%@ WebHandler Language="C#" Class="validateEmail" %>

using System;
using System.Web;
using System.Data.SqlClient;

public class validateEmail : IHttpHandler {

public void ProcessRequest (HttpContext context) {

if (context.Request.QueryString.Count != 0)
{
string email = context.Request.QueryString[0].Trim();
context.Response.ContentType = "text/plain";
SqlConnection conn = new SqlConnection("Server=localhost;User Id=sa;Password=;Database=XXX");
SqlCommand sqlCmd = new SqlCommand("select count(*) from Clients where email=@email", conn);
sqlCmd.Parameters.AddWithValue("@email", email);

try
{
conn.Open();
int result = (int)sqlCmd.ExecuteScalar();
context.Response.Write("{message:'"+result.ToString()+"'}"); //輸出為JSON格式
}
finally
{
conn.Close();
}
}

}

public bool IsReusable {
get {
return false;
}
}

}
接下來實現客戶端的html，添加對JQuery的引用

js腳本代碼：
//給定需要驗證的input添加 needValidate='true' 的屬性對，然后選擇他們，添加blur的事件函數。
("input[needValidate='true']").blur(function()
{
if(requireField(this))//首先客戶端驗證
{
if(this.id == 'your_email')//如果是郵件則還進行ajax服務器端驗證
{
('#email_img').html("<img src='loading.gif' />");
.getJSON("validateEmail.ashx",{email:this.value},processValidateEmail);//getJSON獲取服務器端的驗證結果
}
else
{
('#'+this.id+'_img').html("<img src='accept.gif' />");
('#'+this.id+'_error').html("");
}
}
}
)

});

//ajax驗證完成后的處理函數
function processValidateEmail(data)
{
if(data.message == "0")//表示服務器端沒有該郵箱地址
{
('#your_email_img').html("<img src='accept.gif' />");
('#your_email_error').html("");
}
else
{
('#your_email_img').html("<img src='exclamation.gif' />");
('#your_email_error').html("郵箱已被人注冊，請更換重試！").attr("style","color:red;");
}
}

//客戶端驗證函數
function requireField(o)
{
var your_email = /^([a-zA-Z0-9_/./-])+/@(([a-zA-Z0-9/-])+/.)+([a-zA-Z0-9]{2,4})+/;
var your_name = /^(/w){4,20}|[^u4e00-u9fa5]{2,20}/;
var your_tel = /^[+]{0,1}(/d){1,3}[ ]?([-]?((/d)|[ ]){1,12})+/;
var your_email_error = "請輸入正確的郵箱格式！";
var your_name_error = "請輸入您的名字，不少于4個字符！";
var your_tel_error = "請輸入正確的電話號碼格式！";

if(o.value.match(eval(o.id)))
{
return true;
}
else
{
('#'+o.id+'_img').html("<img src='exclamation.gif' />");
('#'+o.id+'_error').html(eval(o.id+'_error')).attr("style","color:red;");
}
return false;
}

//submit前的驗證函數
function validate() {
var biaozhi = true;
("input[needValidate='true']").each(function(i){
if(!requireField(this))
{ biaozhi = false; }
}
)
return biaozhi;
}
html須驗證的表單代碼：