最近在做一个小型项目,用到一个用户注册,由于安全考虑,要求客户端和服务器端同时验证,我在项目中用的是微软的验证控件,在使用的过程中发现真是很麻烦,在页面中拖了十几个验证控件不说,因为验证的时候验证失败时自定义显示一些错误信息,做起来相当麻烦,有些小的改动找个代码都不方便,最关键的是无法重复使用,所以想自己做一个验证的控件,本来想做自定义控件,后来发现由于验证方面定义的部分比较多,最后选择使用类库。通过页面调用类来实现控件的验证,好了,废话就不多说了,下面请大家一下,初次开源,请大家多多指教。
\n
先请大家看看页面调用的代码。
\n
页面调用
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
\n
namespace Demo
{
public partial class WebForm1 : System.Web.UI.Page
{
Koodoo.Validation.FormValidate fv;
protected void Page_Load(object sender, EventArgs e)
{
fv = new Koodoo.Validation.FormValidate(this, “Button1″, true);
fv.ValiAjaxEmail(“UserEmail”, “请输入正确格式的Email”, “您输入的邮箱已存在”, “CheckEmail.aspx”, “key”);
fv.ValiNormalNumber(“TextBox1″, “请输入数字,长度为2-6″, false, 2, 6);
fv.ValiCompare(“TextBox2″, “上一个数字不相等”, “TextBox1″);
fv.ValiCheckbox(“CheckBoxList1″, “请至少选择两个”, 2);
fv.ValiRadio(“RadioButtonList1″, “请选择”);
fv.ValiSelect(“DropDownList1″, “请选择”, “请选择”);
fv.Display();
}
\n
protected void Button1_Click(object sender, EventArgs e)
{
if (fv.Submit_Server())
{
Response.Write(“验证通过”);
}
else
{
Response.Write(“验证未通过”);
}
}
}
}
实例化1->参数1:当前页面,参数2:提交的按钮,参数3:是否是开发阶段(当处于开发阶段时,每次都会生成JS代码放到网站的JS文件夹下,如处于运行阶段,就设为false)
\n
fv = new Koodoo.Validation.FormValidate(this, “Button1″, true);
\n
实例化2->参数1:当前页面,参数2:提交的按钮,参数3:显示错误信息方式(1:每一下控件都有对就的Label显示错误,2:在一个指定的Label上显示所有错误信息,3:在一个指定Label上显示一条错误信息)参数4:显示错误信息的指定Label,参数3为2和3时有效,参数5:是否是开发阶段
\n
fv = new Koodoo.Validation.FormValidate(this, “Buttin1″, 1, “ErrMsg”, true);
\n
在使用后,调用Display()向页面加入JS代码。
\n
在服务器端验证调用Submit_Server(),如果返回true则验证通过。
\n
当使用验证报错时,可以自定义Js脚本可以用于显示页面一些自定义的报错样式
\n
如我这里面用到的: (注:报错方式为 1 时,对就的显示错误Label的ID为,被验证控件加“_Err”,如果前面加必填*时,则加”_X”,说的不太清楚,大家看源码吧)
\n
var ShowErr = function(id)
\n
{
(“#”+id).attr(“style”,”border:1px #ff0000 solid;”);
(“#”+id+”_Err”).attr(“style”,”color:red”);
(“#”+id+”_X”).attr(“style”,”color:red”);
}
var HideErr = function(id){
(“#”+id).attr(“style”,”");
(“#”+id+”_Err”).attr(“style”,”");
(“#”+id+”_X”).attr(“style”,”");
}
\n
更多的内容,大家看一下源码吧
\n
\n\n