Validator.js
<scrīpt>
/*************************************************
Validator v1.03
code by 我佛山人
wfsr@msn.com
*************************************************/
Validator = {
Require : /.+/,
Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
Phone : /^((\(\d{3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,
Mobile : /^((\(\d{3}\))|(\d{3}\-))?13\d{9}$/,
Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,
IdCard : /^\d{15}(\d{2}[A-Za-z0-9])?$/,
Currency : /^\d+(\.\d+)?$/,
Number : /^\d+$/,
Zip : /^[1-9]\d{5}$/,
QQ : /^[1-9]\d{4,8}$/,
Integer : /^[-\+]?\d+$/,
Double : /^[-\+]?\d+(\.\d+)?$/,
English : /^[A-Za-z]+$/,
Chinese : /^[\u0391-\uFFE5]+$/,
Username : /^[a-z]\w{3,}$/i,
UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/,
IsSafe : function(str){return !this.UnSafe.test(str);},
SafeString : "this.IsSafe(value)",
Limit : "this.limit(value.length,getAttribute('min'), getAttribute('max'))",
LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))",
Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))",
Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value",
Range : "getAttribute('min') < (value|0) && (value|0) < getAttribute('max')",
Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))",
Custom : "this.Exec(value, getAttribute('regexp'))",
Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))",
ErrorItem : [document.forms[0]],
ErrorMessage : ["以下原因导致提交失败：\t\t\t\t"],
Validate : function(theForm, mode){
var ōbj = theForm || event.srcElement;
var count = obj.elements.length;
this.ErrorMessage.length = 1;
this.ErrorItem.length = 1;
this.ErrorItem[0] = obj;
for(var i=0;i<count;i++){
with(obj.elements[i]){
var _dataType = getAttribute("dataType");
if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined") continue;
this.ClearState(obj.elements[i]);
if(getAttribute("require") == "false" && value == "") continue;
switch(_dataType){
case "Date" :
case "Repeat" :
case "Range" :
case "Compare" :
case "Custom" :
case "Group" :
case "Limit" :
case "LimitB" :
case "SafeString" :
if(!eval(this[_dataType])) {
this.AddError(i, getAttribute("msg"));
}
break;
default :
if(!this[_dataType].test(value)){
this.AddError(i, getAttribute("msg"));
}
break;
}
}
}
if(this.ErrorMessage.length > 1){
mode = mode || 1;
var errCount = this.ErrorItem.length;
switch(mode){
case 2 :
for(var i=1;i<errCount;i++)
this.ErrorItem[i].style.color = "red";
case 1 :
alert(this.ErrorMessage.join("\n"));
this.ErrorItem[1].focus();
break;
case 3 :
for(var i=1;i<errCount;i++){
try{
var span = document.createElement("SPAN");
span.id = "__ErrorMessagePanel";
span.style.color = "red";
this.ErrorItem[i].parentNode.appendChild(span);
span.innerHTML = this.ErrorMessage[i].replace(/\d+:/,"*");
}
catch(e){alert(e.descrīption);}
}
this.ErrorItem[1].focus();
break;
default :
alert(this.ErrorMessage.join("\n"));
break;
}
return false;
}
return true;
},
limit : function(len,min, max){
min = min || 0;
max = max || Number.MAX_VALUE;
return min <= len && len <= max;
},
LenB : function(str){
return str.replace(/[^\x00-\xff]/g,"**").length;
},
ClearState : function(elem){
with(elem){
if(style.color == "red")
style.color = "";
var lastNode = parentNode.childNodes[parentNode.childNodes.length-1];
if(lastNode.id == "__ErrorMessagePanel")
parentNode.removeChild(lastNode);
}
},
AddError : function(index, str){
this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index];
this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str;
},
Exec : function(op, reg){
return new RegExp(reg,"g").test(op);
},
compare : function(op1,operator,op2){
switch (operator) {
case "NotEqual":
return (op1 != op2);
case "GreaterThan":
return (op1 > op2);
case "GreaterThanEqual":
return (op1 >= op2);
case "LessThan":
return (op1 < op2);
case "LessThanEqual":
return (op1 <= op2);
default:
return (op1 == op2);
}
},
MustChecked : function(name, min, max){
var groups = document.getElementsByName(name);
var hasChecked = 0;
min = min || 1;
max = max || groups.length;
for(var i=groups.length-1;i>=0;i--)
if(groups[i].checked) hasChecked++;
return min <= hasChecked && hasChecked <= max;
},
IsDate : function(op, formatString){
formatString = formatString || "ymd";
var m, year, month, day;
switch(formatString){
case "ymd" :
m = op.match(new RegExp("^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$"));
if(m == null ) return false;
day = m[6];
month = m[5]*1;
year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10));
break;
case "dmy" :
m = op.match(new RegExp("^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$"));
if(m == null ) return false;
day = m[1];
month = m[3]*1;
year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));
break;
default :
break;
}
if(!parseInt(month)) return false;
month = month==0 ?12:month;
var date = new Date(year, month-1, day);
return (typeof(date) == "object" && year == date.getFullYear() && month == (date.getMonth()+1) && day == date.getDate());
function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;}
}
}
</scrīpt>
使用：
语法：dataType="Require | Chinese | English | Number | Integer | Double | Email | Url | Phone | Mobile | Currency | Zip | IdCard | QQ | Date | SafeString | Repeat | Compare | Range | Limit | LimitB | Group | Custom"
类型：字符串。必选。
说明：用于设定表单项的输入数据验证类型。
选值说明：
可选值 验证功能
Require 必填项
Chinese 中文
English 英文
Number
数字
Integer
整数
Double
实数
Email
Email地址格式
Url
基于HTTP协议的网址格式
Phone
电话号码格式
Mobile
手机号码格式
Currency
货币格式
Zip
邮政编码
IdCard
身份证号码
QQ
QQ号码
Date
日期
SafeString
安全密码
Repeat
重复输入
Compare
关系比较
Range
输入范围
Limit
限制输入长度
LimitB
限制输入的字节长度
Group 验证单/多选按钮组
Custom 自定义正则表达式验证
语法：max="int"
类型：字符串。在dataType属性值为Range时必选，为Group且待验证项是多选按钮组时可选(此时默认值为1)，为为Limit/LimitB时可选(此时默认值为1.7976931348623157e+308，即Number.MAX_VALUE的值)。
说明：当daType属性值为Range时，用于判断输入是否在min与max的属性值间；当dataType属性值为Group，且待验证项是多选按钮组时，用于设定多选按钮组的选中个数，判断选中个数是否在[min, max]区间；当daType属性值为Limit时，用于验证输入的字符数是否在[min, max]区间；当daType属性值为LimitB时，用于验证输入字符的字节数是否在[min, max]区间。
语法：min="int"
类型：字符串。在dataType属性值为Range时必选，为Group且待验证项是多选按钮组时可选(此时默认值为1)，为为Limit/LimitB时可选(此时默认值为0)。
说明：当daType属性值为Range时，用于判断输入是否在min与max的属性值间；当dataType属性值为Group，且待验证项是多选按钮组时，用于设定多选按钮组的选中个数，判断选中个数是否在[min, max]区间；当daType属性值为Limit时，用于验证输入的字符数是否在[min, max]区间；当daType属性值为LimitB时，用于验证输入字符的字节数是否在[min, max]区间。
语法： msg="string"
类型：字符串。必选。
说明：在验证失败时要提示的出错信息。
语法：operator="NotEqual | GreaterThan | GreaterThanEqual | LessThan | LessThanEqual | Equal"
类型：字符串。在dataType属性值为Compare时可选(默认值为Equal)。
说明：参考to属性。
各选值所对应的关系操作符：
可选值 意义说明
NotEqual
不等于 !=
GreaterThan
大于 >
GreaterThanEqual
大于等于 >=
LessThan
小于 <
LessThanEqual
小于等于 <=
Equal 等于 =
语法：require="true | false"
类型：字符串。可选。
说明：用于设定表单项的验证方式。当值为false时表单项不是必填项，但当有填写时，仍然要执行dataType属性所设定的验证方法，值为true或任何非false字符时可省略此属性。
语法：to="sting | int"
类型：字符串。当dataType值为Repeat或Compare时必选。
说明：当dataType值为Repeat时，to的值为某表单项的name属性值，用于设定当前表单项的值是否与目标表单项的值一致；当dataType的值为Compare时，to的选值类型为实数，用于判断当前表单项的输入与to的值是否符合operator属性值所指定的关系。
语法：format="ymd | dmy"
类型：字符串。在dataType属性值为Date时可选(默认值为ymd)。
说明：用于验证输入是否为符合format属性值所指定格式的日期。
符合规则的输入示例 : 2004-11-23，2004/11/23，04.11.23，23-11-2004等
注意：当输入的年份为2位时，如果数值小于30，将使年份看作处于21世纪，否则为20世纪。
语法：regexp="object"
类型：字符串。在dataType属性值为Custom时必选。
说明：用于验证输入是否符合regexp属性所指定的正则表达式。
示例：
<scrīpt src="./Js/validator.js"></scrīpt>
<form name="middle_price" action="index.php" method="post" id="middle_price" ōnSubmit="return Validator.Validate(this,3)">
<table width="595" height="244" border="1" align="left" cellpadding="0" cellspacing="1" bgcolor="#C9C9C9">
<tr>
<th height="15" colspan="2" align="center" bgcolor="#837B6D" class="style1"> </th>
</tr><!--单张印刷报价-->
<tr>
<td width="153" height="23" align="right">数量（张）</td>
<td width="448">
<select name="paper_num" dataType="Require" msg="未选定数量">
<option value="" selected>请选择</option>
<option value="200">200</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="2000">2000</option>
<option value="3000">3000</option>
<option value="5000">5000</option>
<option value="10000">10000</option>
<option value="zdy">自定义</option>
</select>
</td>
</tr>
<tr>
<td height="23" align="right">纸张厚度（克）</td>
<td>
<select name="paper_thinckness" dataType="Require" msg="未选定纸张厚度">
<option value="" selected>请选择</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="95">95</option>
<option value="100">100</option>
<option value="105">105</option>
<option value="120">120</option>
<option value="128">128</option>
<option value="150">150</option>
<option value="157">157</option>
<option value="180">180</option>
<option value="200">200</option>
<option value="zdy">自定义</option>
</select>
</td>
</tr>
<tr>
<td height="18" align="right">纸张类型</td>
<td>
<select name="paper_type" dataType="Require" msg="未选定纸张类型">
<option value="" selected>请选择</option>
<option value="特种纸">特种纸</option>
<option value="单面铜版纸">单面铜版纸</option>
<option value="双面铜版纸">双面铜版纸</option>
<option value="哑粉纸">哑粉纸</option>
<option value="双胶纸（胶版纸）">双胶纸（胶版纸）</option>
<option value="轻涂纸">轻涂纸</option>
<option value="新闻纸">新闻纸</option>
<option value="信封纸 (牛皮纸)">信封纸 (牛皮纸)</option>
<option value="不干胶">不干胶</option>
</select>
</td>
</tr>
<tr>
<td height="18" align="right">纸张尺寸（长X宽/厘米）</td>
<td>
长<input name="paper_width" type="text" size="4" width="25" dataType="Double" msg="纸张尺寸-长度,请用数字">
X宽<input name="paper_height" type="text" size="4" width="25" dataType="Double" msg="纸张尺寸-宽度,请用数字">
厘米
</td>
</tr>
<tr>
<td height="16" align="right">印刷颜色</td>
<td>
<input type="radio" name="print_color" value="单面（4+0）">单面（4+0）
<input type="radio" name="print_color" value="双面（4+4）" dataType="Group" msg="必须选择一个印刷颜色">双面（4+4）
</td>
</tr>
<tr>
<td height="18" align="right">总价(元)</td>
<td><input type="text" name="price_total" size="10" dataType="Currency" msg="总价请用数字">
<input type="checkbox" name="show_price" value="1">显示<!--1显示,0 不显示--></td>
</tr>
<tr>
<td height="18" align="right">备注</td>
<td><textarea name="notes" cols="30" rows="4"></textarea></td>
</tr>
<tr>
<td height="15" colspan="2" align="center">
<input type="submit" name="Submit" value="提交报价">
</td>
</tr>
</table>
</form>
示例的一点点说明：
在form 里加 ōnSubmit="return Validator.Validate(this,3)" 其中可以定义三种错误模式，可选1,2,3(次处是3)，亲自试先好点！
<scrīpt>
/*************************************************
Validator v1.03
code by 我佛山人
wfsr@msn.com
*************************************************/
Validator = {
Require : /.+/,
Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
Phone : /^((\(\d{3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,
Mobile : /^((\(\d{3}\))|(\d{3}\-))?13\d{9}$/,
Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,
IdCard : /^\d{15}(\d{2}[A-Za-z0-9])?$/,
Currency : /^\d+(\.\d+)?$/,
Number : /^\d+$/,
Zip : /^[1-9]\d{5}$/,
QQ : /^[1-9]\d{4,8}$/,
Integer : /^[-\+]?\d+$/,
Double : /^[-\+]?\d+(\.\d+)?$/,
English : /^[A-Za-z]+$/,
Chinese : /^[\u0391-\uFFE5]+$/,
Username : /^[a-z]\w{3,}$/i,
UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/,
IsSafe : function(str){return !this.UnSafe.test(str);},
SafeString : "this.IsSafe(value)",
Limit : "this.limit(value.length,getAttribute('min'), getAttribute('max'))",
LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))",
Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))",
Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value",
Range : "getAttribute('min') < (value|0) && (value|0) < getAttribute('max')",
Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))",
Custom : "this.Exec(value, getAttribute('regexp'))",
Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))",
ErrorItem : [document.forms[0]],
ErrorMessage : ["以下原因导致提交失败：\t\t\t\t"],
Validate : function(theForm, mode){
var ōbj = theForm || event.srcElement;
var count = obj.elements.length;
this.ErrorMessage.length = 1;
this.ErrorItem.length = 1;
this.ErrorItem[0] = obj;
for(var i=0;i<count;i++){
with(obj.elements[i]){
var _dataType = getAttribute("dataType");
if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined") continue;
this.ClearState(obj.elements[i]);
if(getAttribute("require") == "false" && value == "") continue;
switch(_dataType){
case "Date" :
case "Repeat" :
case "Range" :
case "Compare" :
case "Custom" :
case "Group" :
case "Limit" :
case "LimitB" :
case "SafeString" :
if(!eval(this[_dataType])) {
this.AddError(i, getAttribute("msg"));
}
break;
default :
if(!this[_dataType].test(value)){
this.AddError(i, getAttribute("msg"));
}
break;
}
}
}
if(this.ErrorMessage.length > 1){
mode = mode || 1;
var errCount = this.ErrorItem.length;
switch(mode){
case 2 :
for(var i=1;i<errCount;i++)
this.ErrorItem[i].style.color = "red";
case 1 :
alert(this.ErrorMessage.join("\n"));
this.ErrorItem[1].focus();
break;
case 3 :
for(var i=1;i<errCount;i++){
try{
var span = document.createElement("SPAN");
span.id = "__ErrorMessagePanel";
span.style.color = "red";
this.ErrorItem[i].parentNode.appendChild(span);
span.innerHTML = this.ErrorMessage[i].replace(/\d+:/,"*");
}
catch(e){alert(e.descrīption);}
}
this.ErrorItem[1].focus();
break;
default :
alert(this.ErrorMessage.join("\n"));
break;
}
return false;
}
return true;
},
limit : function(len,min, max){
min = min || 0;
max = max || Number.MAX_VALUE;
return min <= len && len <= max;
},
LenB : function(str){
return str.replace(/[^\x00-\xff]/g,"**").length;
},
ClearState : function(elem){
with(elem){
if(style.color == "red")
style.color = "";
var lastNode = parentNode.childNodes[parentNode.childNodes.length-1];
if(lastNode.id == "__ErrorMessagePanel")
parentNode.removeChild(lastNode);
}
},
AddError : function(index, str){
this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index];
this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str;
},
Exec : function(op, reg){
return new RegExp(reg,"g").test(op);
},
compare : function(op1,operator,op2){
switch (operator) {
case "NotEqual":
return (op1 != op2);
case "GreaterThan":
return (op1 > op2);
case "GreaterThanEqual":
return (op1 >= op2);
case "LessThan":
return (op1 < op2);
case "LessThanEqual":
return (op1 <= op2);
default:
return (op1 == op2);
}
},
MustChecked : function(name, min, max){
var groups = document.getElementsByName(name);
var hasChecked = 0;
min = min || 1;
max = max || groups.length;
for(var i=groups.length-1;i>=0;i--)
if(groups[i].checked) hasChecked++;
return min <= hasChecked && hasChecked <= max;
},
IsDate : function(op, formatString){
formatString = formatString || "ymd";
var m, year, month, day;
switch(formatString){
case "ymd" :
m = op.match(new RegExp("^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$"));
if(m == null ) return false;
day = m[6];
month = m[5]*1;
year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10));
break;
case "dmy" :
m = op.match(new RegExp("^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$"));
if(m == null ) return false;
day = m[1];
month = m[3]*1;
year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));
break;
default :
break;
}
if(!parseInt(month)) return false;
month = month==0 ?12:month;
var date = new Date(year, month-1, day);
return (typeof(date) == "object" && year == date.getFullYear() && month == (date.getMonth()+1) && day == date.getDate());
function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;}
}
}
</scrīpt>
使用：
语法：dataType="Require | Chinese | English | Number | Integer | Double | Email | Url | Phone | Mobile | Currency | Zip | IdCard | QQ | Date | SafeString | Repeat | Compare | Range | Limit | LimitB | Group | Custom"
类型：字符串。必选。
说明：用于设定表单项的输入数据验证类型。
选值说明：
可选值 验证功能
Require 必填项
Chinese 中文
English 英文
Number
数字
Integer
整数
Double
实数
Email地址格式
Url
基于HTTP协议的网址格式
Phone
电话号码格式
Mobile
手机号码格式
Currency
货币格式
Zip
邮政编码
IdCard
身份证号码
QQ号码
Date
日期
SafeString
安全密码
Repeat
重复输入
Compare
关系比较
Range
输入范围
Limit
限制输入长度
LimitB
限制输入的字节长度
Group 验证单/多选按钮组
Custom 自定义正则表达式验证
语法：max="int"
类型：字符串。在dataType属性值为Range时必选，为Group且待验证项是多选按钮组时可选(此时默认值为1)，为为Limit/LimitB时可选(此时默认值为1.7976931348623157e+308，即Number.MAX_VALUE的值)。
说明：当daType属性值为Range时，用于判断输入是否在min与max的属性值间；当dataType属性值为Group，且待验证项是多选按钮组时，用于设定多选按钮组的选中个数，判断选中个数是否在[min, max]区间；当daType属性值为Limit时，用于验证输入的字符数是否在[min, max]区间；当daType属性值为LimitB时，用于验证输入字符的字节数是否在[min, max]区间。
语法：min="int"
类型：字符串。在dataType属性值为Range时必选，为Group且待验证项是多选按钮组时可选(此时默认值为1)，为为Limit/LimitB时可选(此时默认值为0)。
说明：当daType属性值为Range时，用于判断输入是否在min与max的属性值间；当dataType属性值为Group，且待验证项是多选按钮组时，用于设定多选按钮组的选中个数，判断选中个数是否在[min, max]区间；当daType属性值为Limit时，用于验证输入的字符数是否在[min, max]区间；当daType属性值为LimitB时，用于验证输入字符的字节数是否在[min, max]区间。
语法： msg="string"
类型：字符串。必选。
说明：在验证失败时要提示的出错信息。
语法：operator="NotEqual | GreaterThan | GreaterThanEqual | LessThan | LessThanEqual | Equal"
类型：字符串。在dataType属性值为Compare时可选(默认值为Equal)。
说明：参考to属性。
各选值所对应的关系操作符：
可选值 意义说明
NotEqual
不等于 !=
GreaterThan
大于 >
GreaterThanEqual
大于等于 >=
LessThan
小于 <
LessThanEqual
小于等于 <=
Equal 等于 =
语法：require="true | false"
类型：字符串。可选。
说明：用于设定表单项的验证方式。当值为false时表单项不是必填项，但当有填写时，仍然要执行dataType属性所设定的验证方法，值为true或任何非false字符时可省略此属性。
语法：to="sting | int"
类型：字符串。当dataType值为Repeat或Compare时必选。
说明：当dataType值为Repeat时，to的值为某表单项的name属性值，用于设定当前表单项的值是否与目标表单项的值一致；当dataType的值为Compare时，to的选值类型为实数，用于判断当前表单项的输入与to的值是否符合operator属性值所指定的关系。
语法：format="ymd | dmy"
类型：字符串。在dataType属性值为Date时可选(默认值为ymd)。
说明：用于验证输入是否为符合format属性值所指定格式的日期。
符合规则的输入示例 : 2004-11-23，2004/11/23，04.11.23，23-11-2004等
注意：当输入的年份为2位时，如果数值小于30，将使年份看作处于21世纪，否则为20世纪。
语法：regexp="object"
类型：字符串。在dataType属性值为Custom时必选。
说明：用于验证输入是否符合regexp属性所指定的正则表达式。
示例：
<scrīpt src="./Js/validator.js"></scrīpt>
<form name="middle_price" action="index.php" method="post" id="middle_price" ōnSubmit="return Validator.Validate(this,3)">
<table width="595" height="244" border="1" align="left" cellpadding="0" cellspacing="1" bgcolor="#C9C9C9">
<tr>
<th height="15" colspan="2" align="center" bgcolor="#837B6D" class="style1"> </th>
</tr><!--单张印刷报价-->
<tr>
<td width="153" height="23" align="right">数量（张）</td>
<td width="448">
<select name="paper_num" dataType="Require" msg="未选定数量">
<option value="" selected>请选择</option>
<option value="200">200</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="2000">2000</option>
<option value="3000">3000</option>
<option value="5000">5000</option>
<option value="10000">10000</option>
<option value="zdy">自定义</option>
</select>
</td>
</tr>
<tr>
<td height="23" align="right">纸张厚度（克）</td>
<td>
<select name="paper_thinckness" dataType="Require" msg="未选定纸张厚度">
<option value="" selected>请选择</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="95">95</option>
<option value="100">100</option>
<option value="105">105</option>
<option value="120">120</option>
<option value="128">128</option>
<option value="150">150</option>
<option value="157">157</option>
<option value="180">180</option>
<option value="200">200</option>
<option value="zdy">自定义</option>
</select>
</td>
</tr>
<tr>
<td height="18" align="right">纸张类型</td>
<td>
<select name="paper_type" dataType="Require" msg="未选定纸张类型">
<option value="" selected>请选择</option>
<option value="特种纸">特种纸</option>
<option value="单面铜版纸">单面铜版纸</option>
<option value="双面铜版纸">双面铜版纸</option>
<option value="哑粉纸">哑粉纸</option>
<option value="双胶纸（胶版纸）">双胶纸（胶版纸）</option>
<option value="轻涂纸">轻涂纸</option>
<option value="新闻纸">新闻纸</option>
<option value="信封纸 (牛皮纸)">信封纸 (牛皮纸)</option>
<option value="不干胶">不干胶</option>
</select>
</td>
</tr>
<tr>
<td height="18" align="right">纸张尺寸（长X宽/厘米）</td>
<td>
长<input name="paper_width" type="text" size="4" width="25" dataType="Double" msg="纸张尺寸-长度,请用数字">
X宽<input name="paper_height" type="text" size="4" width="25" dataType="Double" msg="纸张尺寸-宽度,请用数字">
厘米
</td>
</tr>
<tr>
<td height="16" align="right">印刷颜色</td>
<td>
<input type="radio" name="print_color" value="单面（4+0）">单面（4+0）
<input type="radio" name="print_color" value="双面（4+4）" dataType="Group" msg="必须选择一个印刷颜色">双面（4+4）
</td>
</tr>
<tr>
<td height="18" align="right">总价(元)</td>
<td><input type="text" name="price_total" size="10" dataType="Currency" msg="总价请用数字">
<input type="checkbox" name="show_price" value="1">显示<!--1显示,0 不显示--></td>
</tr>
<tr>
<td height="18" align="right">备注</td>
<td><textarea name="notes" cols="30" rows="4"></textarea></td>
</tr>
<tr>
<td height="15" colspan="2" align="center">
<input type="submit" name="Submit" value="提交报价">
</td>
</tr>
</table>
</form>
示例的一点点说明：
在form 里加 ōnSubmit="return Validator.Validate(this,3)" 其中可以定义三种错误模式，可选1,2,3(次处是3)，亲自试先好点！
分享到：
发表评论
相关推荐
本文将深入探讨"javascript表单验证方式一"，介绍如何利用JavaScript进行表单验证，确保用户输入的数据符合预设规则，提高用户体验，同时也减轻了服务器端的压力。 首先，表单验证的基本目标是检查用户在HTML表单中...
总的来说，"javascript表单验证器三方库.zip" 提供了一个强大的工具，用于处理JavaScript表单验证，它具有可配置性、递归数据验证等特性，是开发高效、健壮的Web应用的重要辅助工具。无论是初学者还是经验丰富的...
这个"JavaScript表单验证模板"是一个实用的工具，适合初学者学习和快速实现表单数据验证功能。表单验证是确保用户输入符合特定规则的关键步骤，它可以防止无效数据提交到服务器，提高用户体验，并减少服务器端处理...
JavaScript表单验证是Web开发中的一个关键环节，它主要用于确保用户在提交数据前输入的信息符合预设的格式和规则，从而提高数据质量和用户体验。在HTML表单中，我们经常使用JavaScript来实现动态验证，因为这种...
首先，JavaScript表单验证的基本步骤包括： 1. **获取表单元素**：通过`document.getElementById`或`document.querySelector`等方法获取表单元素，例如`<input>`、`<select>`和`<textarea>`等。 2. **添加事件监听...
高级的javascript表单验证, 正则及常用验证 制作带关闭按钮的浮动窗口 制作全选全不选效果效果 DIV提示效果的表单验证
"强大JavaScript表单验证"这个主题旨在教你如何有效地利用JavaScript来确保用户提交的数据符合预期的格式和规则，从而提高网站的安全性和用户体验。 1. **表单验证的重要性**：在网页上，表单用于收集用户的个人...
"JavaScript表单验证大全"这个主题涵盖了许多关于如何使用JavaScript有效地验证用户输入的重要概念。表单验证是确保用户提交的数据符合预设规则的关键步骤，它能防止无效数据进入数据库，提升用户体验，并减少服务器...
以下是对给定文件中涉及的一些JavaScript表单验证技术的详细解释： 1. 长度限制：通过检查`value.length`属性来限制文本框的字符数。例如，`if(document.a.b.value.length>50)`检查输入的长度是否超过50个字符，...
"JavaScript表单验证控制代码大全"是一个集成了多种表单验证技术和策略的资源集合，帮助开发者有效地确保用户输入的数据质量和安全性。下面我们将深入探讨这个主题，了解JavaScript如何对表单数据进行验证以及常见的...
### JavaScript表单验证知识点详解 #### 一、前言 在Web开发中，表单验证是确保用户输入数据准确性和安全性的关键步骤。通过前端JavaScript进行初步的数据验证，可以极大地提高用户体验并减轻后端服务器的压力。本...
JavaScript表单验证类是Web开发中的重要组成部分，主要用于在用户提交数据前检查输入的有效性和完整性。这个类通常包含了各种验证规则，如非空检查、邮箱格式验证、手机号码验证等，确保用户输入的数据符合预设的...
通过本文的介绍，你应该能够理解并实现基本的JavaScript表单验证。记住，验证是提高应用质量和用户体验的重要步骤。始终确保你的验证逻辑既严格又用户友好。 通过不断的实践和学习，你可以掌握更复杂的验证技巧，...
通过以上分析，我们可以看到JavaScript在前端表单验证中的重要作用。合理利用JavaScript可以显著提升用户体验，并确保数据的有效性和安全性。同时，随着技术的发展，开发者们也在不断探索更高效、更安全的验证策略。
标题：“Javascript表单验证大全” 描述详解：这篇文章深入探讨了如何利用JavaScript进行前端表单的验证，涵盖了多种常见的验证需求，旨在确保用户输入的数据符合预期的格式和规则，从而提高用户体验并减少后端处理...
JavaScript表单验证控件Validator v1.05是一款用于网页前端数据验证的工具，它能够帮助开发者在用户提交表单前检查输入的数据是否符合预设的规则，从而提高用户体验并减少服务器端的压力。该控件通常包含一系列的...
JavaScript表单验证是Web开发中的一个关键环节，它在用户提交数据到服务器之前对输入进行检查，确保数据的完整性和准确性。在这个“改进后的javascript表单验证”中，我们将探讨如何提升用户体验，增强验证功能，并...