使用javascript 实现.net 验证控件功能
2011-10-07 16:11
736 查看
在我们平时经常会遇到这样的一个问题:当我们选择checkbox时,希望验证一个控件,取消选择,隐藏并取消验证这个控件。如果完全使用服务器事件来实现此功能,肯定用户体现不好,所以我们可以使用javascript 实现.net 验证控件功能。
首先我们看看.NET 中的验证控件,在页面上做了什么事情。
<asp:TextBox ID="txtValidator" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtValidator" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
在页面上解析成:
<input name="txtValidator" type="text" id="Text1" />
<span id="Span1" style="color: Red; visibility: hidden;">RequiredFieldValidator</span>
验证控件在页面变为了一个隐藏的span,需要验证的时候,进行显示。
同时页面上出现了一些用于验证的脚步
<script type="text/javascript">
//<![CDATA[
//验证控件的集合,当添加一个验证控件的时候,就会多一个item
var Page_Validators = new Array(document.getElementById("RequiredFieldValidator1"));
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var RequiredFieldValidator1 = document.all ? document.all["RequiredFieldValidator1"] : document.getElementById("RequiredFieldValidator1"); //找到验证控件
RequiredFieldValidator1.controltovalidate = "txtValidator";//绑定需要验证的控件
RequiredFieldValidator1.errormessage = "RequiredFieldValidator";//显示未验证通过的错误信息
RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";//用于验证的方法
RequiredFieldValidator1.initialvalue = "";
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
ValidatorOnLoad();
}
function ValidatorOnSubmit() {
if (Page_ValidationActive) {
return ValidatorCommonOnSubmit();
}
else {
return true;
}
}
//]]>
</script>
我们通过构造类似的脚本进行控件验证
添加验证span
<asp:CheckBox ID="cbSelect" runat="server" Text="选择" onclick="ajusSelectValidator(this,'spantxtUserName')" />
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
<span id="spantxtUserName" style="color: Red; display: none;">*该项不能为空</span>//添加span,用于显示验证信息
添加脚本
<script language="javascript" type="text/javascript">
var IsSelectID = '<%=cbSelect.ClientID%>';
var txtUserName = '<%=txtUserName.ClientID%>';
function ajusSelectValidator (checkbox, validatorID) {
ajustValidator(checkbox, validatorID, txtUserName);
}
</script>
//Validator.Js
function ajustValidator(checkbox, validatorID, controltoHideID) {
if (checkbox.checked) {
register(validatorID, controltoHideID);
document.getElementById(controltoHideID).style.visibility = "visible";
}
else {
removeValidator(validatorID);
document.getElementById(controltoHideID).style.visibility = "hidden";
}
}
//添加验证关联
function register(validatorID, controltoValidateId) {
Page_Validators.push(document.getElementById(validatorID));
var span = document.getElementById(validatorID);
spanTest.controltovalidate = controltoValidateId;
span.errormessage = "*该项不能为空";
span.display = "Dynamic";
span.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
span.initialvalue = "";
// spanTest.style.visibility = "visible";
ValidatorOnLoad();
}
//取消验证关联
function removeValidator(validatorID) {
var validator = document.getElementById(validatorID);
if (validator) {
for (var i = 0; i < Page_Validators.length; i++) {
if (Page_Validators[i] == validator) {
Page_Validators.splice(i, 1);
i--;
}
}
validator.style.display = "none";
ValidatorOnLoad();
}
}
PS: 如果页面上没有验证控件的话,直接执行上面的代码会出错的,因为Page_Validators 为null,直接往里面push为抛异常。所以用的时候,要加一个验证的控件。
// if ($ != jQuery) {
$ = jQuery.noConflict();
}
var isLogined = false;
var cb_blogId = 43895;
var cb_entryId = 1536903;
var cb_blogApp = "stormlly";
var cb_blogUserGuid = "51f2460b-63cf-dd11-9e4d-001cf0cd104b";
var cb_entryCreatedDate = '2009/8/2 14:12:00';
// ]]>
首先我们看看.NET 中的验证控件,在页面上做了什么事情。
<asp:TextBox ID="txtValidator" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtValidator" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
在页面上解析成:
<input name="txtValidator" type="text" id="Text1" />
<span id="Span1" style="color: Red; visibility: hidden;">RequiredFieldValidator</span>
验证控件在页面变为了一个隐藏的span,需要验证的时候,进行显示。
同时页面上出现了一些用于验证的脚步
<script type="text/javascript">
//<![CDATA[
//验证控件的集合,当添加一个验证控件的时候,就会多一个item
var Page_Validators = new Array(document.getElementById("RequiredFieldValidator1"));
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var RequiredFieldValidator1 = document.all ? document.all["RequiredFieldValidator1"] : document.getElementById("RequiredFieldValidator1"); //找到验证控件
RequiredFieldValidator1.controltovalidate = "txtValidator";//绑定需要验证的控件
RequiredFieldValidator1.errormessage = "RequiredFieldValidator";//显示未验证通过的错误信息
RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";//用于验证的方法
RequiredFieldValidator1.initialvalue = "";
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
ValidatorOnLoad();
}
function ValidatorOnSubmit() {
if (Page_ValidationActive) {
return ValidatorCommonOnSubmit();
}
else {
return true;
}
}
//]]>
</script>
我们通过构造类似的脚本进行控件验证
添加验证span
<asp:CheckBox ID="cbSelect" runat="server" Text="选择" onclick="ajusSelectValidator(this,'spantxtUserName')" />
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
<span id="spantxtUserName" style="color: Red; display: none;">*该项不能为空</span>//添加span,用于显示验证信息
添加脚本
<script language="javascript" type="text/javascript">
var IsSelectID = '<%=cbSelect.ClientID%>';
var txtUserName = '<%=txtUserName.ClientID%>';
function ajusSelectValidator (checkbox, validatorID) {
ajustValidator(checkbox, validatorID, txtUserName);
}
</script>
//Validator.Js
function ajustValidator(checkbox, validatorID, controltoHideID) {
if (checkbox.checked) {
register(validatorID, controltoHideID);
document.getElementById(controltoHideID).style.visibility = "visible";
}
else {
removeValidator(validatorID);
document.getElementById(controltoHideID).style.visibility = "hidden";
}
}
//添加验证关联
function register(validatorID, controltoValidateId) {
Page_Validators.push(document.getElementById(validatorID));
var span = document.getElementById(validatorID);
spanTest.controltovalidate = controltoValidateId;
span.errormessage = "*该项不能为空";
span.display = "Dynamic";
span.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
span.initialvalue = "";
// spanTest.style.visibility = "visible";
ValidatorOnLoad();
}
//取消验证关联
function removeValidator(validatorID) {
var validator = document.getElementById(validatorID);
if (validator) {
for (var i = 0; i < Page_Validators.length; i++) {
if (Page_Validators[i] == validator) {
Page_Validators.splice(i, 1);
i--;
}
}
validator.style.display = "none";
ValidatorOnLoad();
}
}
PS: 如果页面上没有验证控件的话,直接执行上面的代码会出错的,因为Page_Validators 为null,直接往里面push为抛异常。所以用的时候,要加一个验证的控件。
// if ($ != jQuery) {
$ = jQuery.noConflict();
}
var isLogined = false;
var cb_blogId = 43895;
var cb_entryId = 1536903;
var cb_blogApp = "stormlly";
var cb_blogUserGuid = "51f2460b-63cf-dd11-9e4d-001cf0cd104b";
var cb_entryCreatedDate = '2009/8/2 14:12:00';
// ]]>
相关文章推荐
- 使用JavaScript代码实现各种数据控件的反选功能,不要只做拖控件的菜鸟
- JavaScript使用键盘输入控制实现数字验证功能
- 使用JavaScript代码实现各种数据控件的反选功能 不要只做拖控件的菜鸟
- ASP.NET中服务器控件Button调用javascript代码运用正则表达式验证TextBox中输入的是否为正整数或正小数,符合要求则继续运行服务器端代码功能的实现
- 在JQuery的validate功能中使用remote实现Ajax功能后台验证
- javascript小例子--实现邮箱验证的功能
- 使用C1TrueDBGrid表格控件实现数据绑定、分组和过滤功能
- 使用CTabCtrl控件实现属性页功能
- 使用javascript实现多个图片漂浮的效果(完善火狐滤镜功能)
- Android使用 Spinner控件实现下拉框功能
- 使用.net FtpWebRequest 实现FTP常用功能 上传 下载 获取文件列表 移动 切换目录 改名
- 在web中使用windows控件,实现摄像头功能
- 使用 JavaScript 实现灵活的固定导航功能
- 使用JavaScript实现选择头像和表情的功能
- 使用Delphi 通过WebServices 要想实现到.Net 或者是Java的WebServices 头验证.
- 用户体验超棒并且功能强大使用简单的javascript表单验证 - Parsley.js
- JavaScript的String类型replace()方法介绍和使用replace()方法实现简单html模板替换功能
- 使用JQuery实现智能表单验证功能
- Java使用正则表达式对注册页面进行验证功能实现