[求教]asp.net中的javascript验证问题
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中的验证效果一样。
[解决办法]
验证代码不是写在onblur里
而是写在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;
}
//每个控件都要验证
}
[解决办法]
修改一个js方法就好
//验证表单
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(); " />
这样就可以避免你说的那种情况了
[解决办法]
<!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>
<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();
}
[解决办法]
String.prototype.trim = function() {
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>
[解决办法]
@ yanghuijun(会飞的鱼)：
可以设置多个标记，最后逻辑与一下，比如:
return (用户名判断标记 && 邮箱判断标记);
[解决办法]
前台js：
function Valid2()
{
if(document.getElementById( "tbtel ").value== " ")
{
alert( "联系电话不能为空！ ");
document.getElementById( "tbtel ").focus();
return false;
}
else
{
var obj = document.getElementById( "tbtel ");
var value = obj.value;
var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;
if(!patrn.test(value))
{
alert( "联系电话格式不正确！ ");
obj.focus();
obj.select();
return false;
}
}
var obj = document.getElementById( "tbqq ");
var value = obj.value;
if(value!= " ")
{
var patrn=/^[1-9][0-9]{4,8}$/;
if(!patrn.test(value))
{
alert( "QQ号码格式不正确！ ");
obj.focus();
obj.select();
return false;
}
}
if(document.getElementById( "tbemail ").value== " ")
{
alert( "邮箱不能为空！ ");
document.getElementById( "tbemail ").focus();
return false;
}
else
{
var obj = document.getElementById( "tbemail ");
var value = obj.value;
var patrn=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
if(!patrn.test(value))
{
alert( "邮箱格式不正确！ ");
obj.focus();
obj.select();
return false;
}
}
return true;
}
后台page_load中：
Button1.Attributes.Add( "onclick ", "return Valid2(); ");
