asp.net中已经有比较好的验证控件,但总觉得前台生成代码太多,最近想深入学习一下javascript,于是遇到以下问题:
先贴代码:
<form id="form1" runat="server">
<td>姓 名:<asp:TextBox ID="TxtUserName" runat="server" onblur="checkNull(this,'cc');"></asp:TextBox> <label id="cc"></label>
</td>
<td>Q Q 号:<asp:TextBox ID="TxtQq" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>邮 箱:<asp:TextBox ID="TxtMail" runat="server"></asp:TextBox>
</td>
<td>验证码:<asp:TextBox ID="TxtCheckCode" runat="server" MaxLength="10"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<div id="addText">
内 容:
</div>
<asp:TextBox ID="TxtContent" runat="server" Rows="6"
TextMode="MultiLine" Width="500px" onfocus="displayEditSytle();"></asp:TextBox>
</div>
</td>
</tr>
<tr>
<asp:Button ID="BtnSubmit" runat="server" Text="发 表" onclick="BtnSubmit_Click" />
<input id="Reset1" type="reset" value="重 置" /></td>
</tr>
</table>
</div>
</form>//js代码:
//验证是否为空(只贴部分)
function checkNull(e,ds)
{
if(e.value=="" || e.value=="undefined")
{
document.getElementById(ds).innerHTML="*";
return false;
}
else
{
document.getElementById(ds).innerHTML="";
return true;
}
}
以上删除掉了部分代码,要解决的问题如下:
一、如何在点击“发表“按钮时验证表单内的所有内容是否符合正则,如果不符合则不能提交(要求跟asp.net中的验证控制效果一样)
例如:txtuserName的onblur事件激活时可以判断它是否为空,但按钮点击时一样还是可以提交内容。。如果有十个文本框需要验证,是否需要一个一个判断
二、如果通不过验证则不能执BtnSubmit的onclick事件!!如何写代码? 要求:javascript实现,跟asp.net中的验证效果一样。
先贴代码:
<form id="form1" runat="server">
<td>姓 名:<asp:TextBox ID="TxtUserName" runat="server" onblur="checkNull(this,'cc');"></asp:TextBox> <label id="cc"></label>
</td>
<td>Q Q 号:<asp:TextBox ID="TxtQq" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>邮 箱:<asp:TextBox ID="TxtMail" runat="server"></asp:TextBox>
</td>
<td>验证码:<asp:TextBox ID="TxtCheckCode" runat="server" MaxLength="10"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<div id="addText">
内 容:
</div>
<asp:TextBox ID="TxtContent" runat="server" Rows="6"
TextMode="MultiLine" Width="500px" onfocus="displayEditSytle();"></asp:TextBox>
</div>
</td>
</tr>
<tr>
<asp:Button ID="BtnSubmit" runat="server" Text="发 表" onclick="BtnSubmit_Click" />
<input id="Reset1" type="reset" value="重 置" /></td>
</tr>
</table>
</div>
</form>//js代码:
//验证是否为空(只贴部分)
function checkNull(e,ds)
{
if(e.value=="" || e.value=="undefined")
{
document.getElementById(ds).innerHTML="*";
return false;
}
else
{
document.getElementById(ds).innerHTML="";
return true;
}
}
以上删除掉了部分代码,要解决的问题如下:
一、如何在点击“发表“按钮时验证表单内的所有内容是否符合正则,如果不符合则不能提交(要求跟asp.net中的验证控制效果一样)
例如:txtuserName的onblur事件激活时可以判断它是否为空,但按钮点击时一样还是可以提交内容。。如果有十个文本框需要验证,是否需要一个一个判断
二、如果通不过验证则不能执BtnSubmit的onclick事件!!如何写代码? 要求:javascript实现,跟asp.net中的验证效果一样。
解决方案 »
- 添加用户控件缓存依赖项发生的异常?高手指正。
- 如何设置,asp才可以在vs2010里使用啊?
- 刚才那个格式比较乱,重发。一个jquery取Json数据的问题。谢谢。(有码)
- web.config配置问题: 不允许有子节点
- 1.jpg,2.jpg,3.jpg怎样提取前面的数字
- 如何将自定义的方法应用到DataGrid的绑定列上
- 各位:请问我下载了一个asp.net的原代码。我想在我的机器里运行??
- 免费赚点工具(Cashfiesta)
- 奇葩ie:asp.net的LinkButton与TreeView的节点点击没反应
- 关于冒泡事件的问题?
- 关于自定义验证控件
- Webcast 下载的视频讲座 在Windows 2003下 播放为什么有噪音,不清楚??
而是写在button的onclick里
如果通过则返回true否则false在.cs中
BtnSubmit.Attributes.Add("onclick","return btnClick()");.aspx中
function btnClick
{
var txt = document.getElementById("TxtUserName");//姓名
if (验证通过)
{
return true;
}
else
{
alert("asdf");
return false;
}
//每个控件都要验证
}
在vs2005中的button中有一个onClientClick属性的,将它的值设置为btnClick()也行滴
var profile_string_invalid="*";
var profile_qq_invalid="QQ号码无效"
var profile_email_invalid="Email地址无效"
function displayError(error,errorString)
{
document.getElementById(error).innerHTML=errorString;
}function trim(str)
{
return str.replace(/^\s*(.*?)[\s\n]*$/g, '$1');
}
//验证表单
function checkForm()
{
//验证用户名是否为空
var userName=trim(document.getElementById("TxtUserName").value);
if(userName=="")
{
displayError('checkUserName',profile_string_invalid);
return false;
}
else
{
displayError('checkUserName',profile_string);
return true;
}
//验证验证码是否为空
var checkCoder=trim(document.getElementById("TxtCheckCode").value);
if(checkCoder=="")
{
displayError('checkCode',profile_string_invalid);
return false;
}
else
{
displayError('checkCode',profile_string)
return true;
}
}aspx代码:
<asp:Button ID="BtnSubmit" runat="server" Text="发 表" onclick="BtnSubmit_Click"
onclientclick="return checkForm();" />
按如上代码来写,如果用户名验证通过,则返回true,那么return之后后面的验证岂不是直接跳过啊?
如果想在onblur事件中验证就附加一隐藏文本<input type=hidden>
验证不通过时将其赋值0 通过1 提交前判断其值即可
2、如果设一个标记则反复赋值true或flase,实际上如果验证八个文本框的话,起作用的只有最后一个(前面的根本不起作用)
这样虽可,但如果有三十个文本框需要验证的话,显示设三十个input hidden是不实际的啊。。
//验证表单
function checkForm()
{
//验证用户名是否为空
var userName=trim(document.getElementById("TxtUserName").value);
//验证结果
var bIsOK=false;
if(userName=="")
{
displayError('checkUserName',profile_string_invalid);
//return false;
bIsOK=false;
}
else
{
displayError('checkUserName',profile_string);
//return true;
bIsOK=true; }
//验证验证码是否为空
var checkCoder=trim(document.getElementById("TxtCheckCode").value);
if(checkCoder=="")
{
displayError('checkCode',profile_string_invalid);
//return false;
bIsOK=false; }
else
{
displayError('checkCode',profile_string)
//return true;
bIsOK=false; }
return bIsOK;
}
aspx代码:
<asp:Button ID="BtnSubmit" runat="server" Text="发 表" onclick="BtnSubmit_Click"
onclientclick="return checkForm();" />
这样就可以避免你说的那种情况了
这样显然不能解决问题,按你的方法:
假设username为空,bIsOk为false,但程序还是会往下执行,则假如验证码不为空。则bIsOk又重赋值为true,那么checkForm返回值还是为true,userName为空的验证岂不是失效了?
这样虽可,但如果有三十个文本框需要验证的话,显示设三十个input hidden是不实际的啊。。一个仍然搞定,而值不同,比如:-1代表USER不成功,-2代表密码不符……1代表成功可提交
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>FormValid Demo1 基本使用方法</title>
<script language="JavaScript" type="text/javascript">
var FormValid = function(frm) {
this.frm = frm;
this.errMsg = new Array();
this.errName = new Array();
this.required = function(inputObj) {
if (typeof(inputObj) == "undefined" || inputObj.value.trim() == "") {
return false;
}
return true;
}
this.eqaul = function(inputObj, formElements) {
var fstObj = inputObj;
var sndObj = formElements[inputObj.getAttribute('eqaulName')];
if (fstObj != null && sndObj != null) {
if (fstObj.value != sndObj.value) {
return false;
}
}
return true;
} this.gt = function(inputObj, formElements) {
var fstObj = inputObj;
var sndObj = formElements[inputObj.getAttribute('eqaulName')];
if (fstObj != null && sndObj != null && fstObj.value.trim()!='' && sndObj.value.trim()!='') {
if (fstObj.value <= sndObj.value) {
return false;
}
}
return true;
} this.compare = function(inputObj, formElements) {
var fstObj = inputObj;
var sndObj = formElements[inputObj.getAttribute('objectName')];
if (fstObj != null && sndObj != null && fstObj.value.trim()!='' && sndObj.value.trim()!='') {
if (!eval('fstObj.value' + inputObj.getAttribute('operate') + 'sndObj.value')) {
return false;
}
}
return true;
}
this.limit = function (inputObj) {
var len = inputObj.value.length;
if (len) {
var minv = inputObj.getAttribute('min');
var maxv = inputObj.getAttribute('max');
minv = minv || 0;
maxv = maxv || Number.MAX_VALUE;
return minv <= len && len <= maxv;
}
return true;
}
this.range = function (inputObj) {
var val = parseInt(inputObj.value);
if (inputObj.value) {
var minv = inputObj.getAttribute('min');
var maxv = inputObj.getAttribute('max');
minv = minv || 0;
maxv = maxv || Number.MAX_VALUE;
return minv <= val && val <= maxv;
}
return true;
}
this.requireChecked = function (inputObj) {
var minv = inputObj.getAttribute('min');
var maxv = inputObj.getAttribute('max');
minv = minv || 1;
maxv = maxv || Number.MAX_VALUE;
var checked = 0;
var groups = document.getElementsByName(inputObj.name);
for(var i=0;i<groups.length;i++) {
if(groups[i].checked) checked++;
}
return minv <= checked && checked <= maxv;
}
this.filter = function (inputObj) {
var value = inputObj.value;
var allow = inputObj.getAttribute('allow');
if (value.trim()) {
return new RegExp("^.+\.(?=EXT)(EXT)$".replace(/EXT/g, allow.split(/\s*,\s*/).join("|")), "gi").test(value);
}
return true;
}
this.isNo = function (inputObj) {
var value = inputObj.value;
var noValue = inputObj.getAttribute('noValue');
return value!=noValue;
}
this.checkReg = function(inputObj, reg, msg) {
inputObj.value = inputObj.value.trim(); if (inputObj.value == '') {
return;
} else {
if (!reg.test(inputObj.value)) {
this.addErrorMsg(inputObj.name,msg);
}
}
} this.passed = function() {
if (this.errMsg.length > 0) {
FormValid.showError(this.errMsg,this.errName);
frt = document.getElementsByName(this.errName[0])[0];
if (frt.type!='radio' && frt.type!='checkbox') {
frt.focus();
}
return false;
} else {
return true;
}
} this.addErrorMsg = function(name,str) {
this.errMsg.push(str);
this.errName.push(name);
}
this.addAllName = function(name) {
FormValid.allName.push(name);
}
}
FormValid.allName = new Array();
FormValid.showError = function(errMsg) {
var msg = "";
for (i = 0; i < errMsg.length; i++) {
msg += "- " + errMsg[i] + "\n";
} alert(msg);
}
function validator(frm) {
var formElements = frm.elements;
var fv = new FormValid(frm);
for (var i=0; i<formElements.length;i++) {
var validType = formElements[i].getAttribute('valid');
var errorMsg = formElements[i].getAttribute('errmsg');
if (validType==null) continue;
fv.addAllName(formElements[i].name); var vts = validType.split('|');
var ems = errorMsg.split('|');
for (var j=0; j<vts.length; j++) {
var curValidType = vts[j];
var curErrorMsg = ems[j];
switch (curValidType) {
case 'isNumber':
case 'isEmail':
case 'isPhone':
case 'isMobile':
case 'isIdCard':
case 'isMoney':
case 'isZip':
case 'isQQ':
case 'isInt':
case 'isEnglish':
case 'isChinese':
case 'isUrl':
case 'isDate':
case 'isTime':
fv.checkReg(formElements[i],RegExps[curValidType],curErrorMsg);
break;
case 'regexp':
fv.checkReg(formElements[i],new RegExp(formElements[i].getAttribute('regexp'),"g"),curErrorMsg);
break;
case 'custom':
if (!eval(formElements[i].getAttribute('custom')+'(formElements[i],formElements)')) {
fv.addErrorMsg(formElements[i].name,curErrorMsg);
}
break;
default :
if (!eval('fv.'+curValidType+'(formElements[i],formElements)')) {
fv.addErrorMsg(formElements[i].name,curErrorMsg);
}
break;
}
}
}
return fv.passed();
}
return this.replace(/^\s*|\s*$/g, "");
}
var RegExps = function(){};
RegExps.isNumber = /^[-\+]?\d+(\.\d+)?$/;
RegExps.isEmail = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)/;
RegExps.isPhone = /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/;
RegExps.isMobile = /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/;
RegExps.isIdCard = /(^\d{15}$)|(^\d{17}[0-9Xx]$)/;
RegExps.isMoney = /^\d+(\.\d+)?$/;
RegExps.isZip = /^[1-9]\d{5}$/;
RegExps.isQQ = /^[1-9]\d{4,10}$/;
RegExps.isInt = /^[-\+]?\d+$/;
RegExps.isEnglish = /^[A-Za-z]+$/;
RegExps.isChinese = /^[\u0391-\uFFE5]+$/;
RegExps.isUrl = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
RegExps.isDate = /^\d{4}-\d{1,2}-\d{1,2}$/;
RegExps.isTime = /^\d{4}-\d{1,2}-\d{1,2}\s\d{1,2}:\d{1,2}:\d{1,2}$/;
</script>
</head><body><h2>FormValid Demo1 基本使用方法</h2>
<table width="400" border="0" cellpadding="3" cellspacing="0">
<form id="form1" name="form1" method="post" onsubmit="return validator(this)" action="">
<tr>
<td width="100">用户名:</td>
<td><input name="username" type="text" valid="required" errmsg="用户名不能为空!" /></td>
</tr>
<tr>
<td>密码</td>
<td><input name="passwd" type="password" id="passwd" valid="required" errmsg="密码不能为空!" /></td>
</tr>
<tr>
<td>重复密码</td>
<td><input name="passwd2" type="password" id="passwd2" valid="eqaul" eqaulName="passwd" errmsg="两次密码不同!" /></td>
</tr>
<tr>
<td>Email</td>
<td><input name="Email" type="text" id="Email" valid="required|isEmail" errmsg="Email不能为空|Email格式不对!" /></td>
</tr>
<tr>
<td>手机</td>
<td><input name="mobile" type="text" id="mobile" valid="isMobile" errmsg="手机格式不对!" /></td>
</tr>
<tr>
<td>生日</td>
<td><input name="birthday" type="text" id="birthday" valid="isDate" errmsg="生日格式不对!" /></td>
</tr>
<tr>
<td>B>A</td>
<td>A:<input size="2" name="compare_a" type="text" id="compare_a" />
B:<input size="2" name="compare_b" type="text" id="compare_b" objectName="compare_a" operate=">" valid="compare" errmsg="B必须要>A!" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="提交" /></td>
</tr>
</form>
</table>
</body>
</html>
可以设置多个标记,最后逻辑与一下,比如:
return (用户名判断标记 && 邮箱判断标记);