代码:<!--
使用时请将下面的javascript代码存到一个单一的js文件中。
1、表单要求
<form name="formname" onSubmit="return validateForm(this)"></form>
将对表单中的所有以下类型的域依次验证,所有验证是去除了前导和后缀空格的,要注意是区分大小写的。
2、空值验证
表单中任意域加上emptyInfo属性将对此域是否为空进行验证(可以和最大长度验证\一般验证方式同时使用)。
无此属性视为此域允许空值。
如:<input type="text" name="fieldNamename" emptyInfo="字段不能为空!">
3、最大长度验证(可以和空值验证、一般验证方式同时使用):
<input type="text" name="fieldNamename" maxlength="20" lengthInfo="最大长度不能超过20!">
或,<textarea maxlength="2000" lengthInfo="最大长度不能超过2000!">
3、一般验证方式(不对空值做验证):
如:<input type="text" validator="^(19|20)[0-9]{2}$" errorInfo="不正确的年份!" >
4、标准验证(不与其它验证方式同时使用):
全部通过<input type="hidden">来实现,并且不需要name属性以免提交到服务器。
4.1、合法日期验证:
<input type="text" name="yearfieldName" value="2004">注:这里也可以是<select name="yearfieldName"></select>,以下同
<input type="text" name="monthfieldName" value="02">
<input type="text" name="dayfieldName" value="03">
<input type="hidden" validatorType="DateGroup" year="yearfieldName" month="monthfieldName" day="dayfieldName" errorInfo="不正确的日期!">
yearfieldName、monthfieldName、dayfieldName分别为年月日字段,月和日可以是两位(MM)或一位格式(M),
此处不对每个字段分别检验(如果要检验,请在年月日三个域分别使用前面的一般验证方式),只对日期的最大值是否合法检查;
4.2、日期格式验证(请注意,此验证不对日期是否有效进行验证,还未找到从格式中得到年月日数据的方法^_^):
<input type="text" name="datefieldName" value="2003-01-03 21:31:00">
<input type="hidden" validatorType="Date" fieldName="datefieldName"; format="yyyy-MM-dd HH:mm:ss" errorInfo="不正确的日期!">
其中格式仅对y、M、d、H、m、s进行支持(其它字符视为非时间的字符)
4.3、列表验证:
检验列表(checkbox、redio、select)是否至少选中了一条记录(对select主要用于多项选择)
<input type="checkbox" name="checkbox1">
<input type="hidden" validatorType="Checkbox" fieldName="checkbox1" errorInfo="请至少选中一条记录!">
其中validatorType可以是Checkbox、R、Select;
对于一个select表单,如果要求选择一条不能是第一条的记录,请用下列方式:
<select name="select1" emptyInfo="请选择一个选项!">
<option value="">==请选择==</option>
<option value="1">1</option>
<select>
4.4、Email验证:
<input type="text" name="email">
<input type="hidden" fieldName="email" validatorType="Email" separator="," errorInfo="不正确的Email!">
其中separator为可选项,表示输入多个email时的分隔符(无此选项只能是一个地址)
4.5、加入其它javascript操作:
<script type="text/javascript">
function functionname(){
自定义方法
}
</script>
表单中加入<input type="hidden" validatorType="javascript" functionName="functionname">(此时emptyInfo等属性无效)
时将调用function属性中指定的javascript方法(要求方法返回true或false,返回false将不再验证表单,也不提交表单)。
5、在表单通过验证提交前disable一个按钮(也可将其它域disable,不能与其它验证同在一个域),不要求按钮是表单中的最后一个
<input type="button" name="提交" validatorType="disable">
6、不验证表单
<input type="hidden" name="validate" value="0" functionName="functionname">
当validator域值为0时不对表单进行验证,直接提交表单或执行指定function并返回true后提交表单
functionName为可选
-->
<script type="text/javascript">
function getStringLength(str){
var endvalue=0;
var sourcestr=new String(str);
var tempstr;
for (var strposition = 0; strposition < sourcestr.length; strposition ++) {
tempstr=sourcestr.charAt(strposition);
if (tempstr.charCodeAt(0)>255 || tempstr.charCodeAt(0)<0) {
endvalue=endvalue+2;
} else {
endvalue=endvalue+1;
}
}
return(endvalue);
}
function trim(str){
if(str==null) return "";
if(str.length==0) return "";
var i=0,j=str.length-1,c;
for(;i<str.length;i++){
c=str.charAt(i);
if(c!=' ') break;
}
for(;j>-1;j--){
c=str.charAt(j);
if(c!=' ') break;
}
if(i>j) return "";
return str.substring(i,j+1);
}
function validateDate(date,format,alt){
var time=trim(date.value);
if(time=="") return;
var reg=format;
var reg=reg.replace(/yyyy/,"[0-9]{4}");
var reg=reg.replace(/yy/,"[0-9]{2}");
var reg=reg.replace(/MM/,"((0[1-9])|1[0-2])");
var reg=reg.replace(/M/,"(([1-9])|1[0-2])");
var reg=reg.replace(/dd/,"((0[1-9])|([1-2][0-9])|30|31)");
var reg=reg.replace(/d/,"([1-9]|[1-2][0-9]|30|31))");
var reg=reg.replace(/HH/,"(([0-1][0-9])|20|21|22|23)");
var reg=reg.replace(/H/,"([0-9]|1[0-9]|20|21|22|23)");
var reg=reg.replace(/mm/,"([0-5][0-9])");
var reg=reg.replace(/m/,"([0-9]|([1-5][0-9]))");
var reg=reg.replace(/ss/,"([0-5][0-9])");
var reg=reg.replace(/s/,"([0-9]|([1-5][0-9]))");
reg=new RegExp("^"+reg+"$");
if(reg.test(time)==false){//验证格式是否合法
alert(alt);
date.focus();
return false;
}
return true;
}
function validateDateGroup(year,month,day,alt){
var array=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var y=parseInt(year.value);
var m=parseInt(month.value);
var d=parseInt(day.value);
var maxday=array[m-1];
if(m==2){
if((y%4==0&&y%100!=0)||y%400==0){
maxday=29;
}
}
if(d>maxday){
alert(alt);
return false;
}
return true;
}
function validateCheckbox(obj,alt){
var rs=false;
if(obj!=null){
if(obj.length==null){
return obj.checked;
}
for(i=0;i<obj.length;i++){
if(obj[i].checked==true){
return true;
}
}
}
alert(alt);
return rs;
}
function validateRadio(obj,alt){
var rs=false;
if(obj!=null){
if(obj.length==null){
return obj.checked;
}
for(i=0;i<obj.length;i++){
if(obj[i].checked==true){
return true;
}
}
}
alert(alt);
return rs;
}
function validateSelect(obj,alt){
var rs=false;
if(obj!=null){
for(i=0;i<obj.options.length;i++){
if(obj.options[i].selected==true){
return true;
}
}
}
alert(alt);
return rs;
}
function validateEmail(email,alt,separator){
var mail=trim(email.value);
if(mail=="") return;
var em;
var myReg = /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/;
if(separator==null){
if(myReg.test(email.value)==false){
alert(alt);
email.focus();
return false;
}
}
else{
em=email.value.split(separator);
for(i=0;i<em.length;i++){
em[i]=em[i].trim();
if(em[i].length>0&&myReg.test(em[i])==false){
alert(alt);
email.focus();
return false;
}
}
}
return true;
}
function validateForm(theForm){// 若验证通过则返回true
var disableList=new Array();
var field = theForm.elements; // 将表单中的所有元素放入数组
for(var i = 0; i < field.length; i++){
var vali=theForm.validate;
if(vali!=null){
if(vali.value=="0"){
var fun=vali.functionName;
if(fun!=null){
return eval(fun+"()");
}
else{
return true;
}
}
}
var empty=false;
var value=trim(field[i].value);
if(value.length==0){//是否空值
empty=true;
}
var emptyInfo=field[i].emptyInfo;//空值验证
if(emptyInfo!=null&&empty==true){
alert(emptyInfo);
field[i].focus();
return false;
}
var lengthInfo=field[i].lengthInfo;//最大长度验证
if(lengthInfo!=null&&getStringLength(value)>field[i].maxLength){
alert(lengthInfo);
field[i].focus();
return false;
}
var validatorType=field[i].validatorType;
if(validatorType!=null){//其它javascript
var rs=true;
if(validatorType=="javascript"){
eval("rs="+field[i].functionName+"()");
if(rs==false){
return false;
}
else{
continue;
}
}
else if(validatorType=="disable"){//提交表单前disable的按钮
disableList.length++;
disableList[disableList.length-1]=field[i];
continue;
}
else if(validatorType=="Date"){
rs=validateDate(theForm.elements(field[i].fieldName),field[i].format,field[i].errorInfo);
}
else if(validatorType=="DateGroup"){
rs=validateDateGroup(theForm.elements(field[i].year),theForm.elements(field[i].month),theForm.elements(field[i].day),field[i].errorInfo);
}
else if(validatorType=="Checkbox"){
rs=validateCheckbox(theForm.elements(field[i].fieldName),field[i].errorInfo);
}
else if(validatorType=="Radio"){
rs=validateRadio(theForm.elements(field[i].fieldName),field[i].errorInfo);
}
else if(validatorType=="Select"){
rs=validateSelect(theForm.elements(field[i].fieldName),field[i].errorInfo);
}
else if(validatorType=="Email"){
rs=validateEmail(theForm.elements(field[i].fieldName),field[i].errorInfo);
}
else{
alert("验证类型不被支持, fieldName: "+field[i].name);
return false;
}
if(rs==false){
return false;
}
}
else{//一般验证
if(empty==false){
var v = field[i].validator; // 获取其validator属性
if(!v) continue; // 如果该属性不存在,忽略当前元素
var reg=new RegExp(v);
if(reg.test(field[i].value)==false){
alert(field[i].errorInfo);
field[i].focus();
return false;
}
}
}
}
for(i=0;i<disableList.length;i++){
disableList[i].disabled=true;
}
return true;
}
</script>
分享到:
相关推荐
JavaScript的RegExp对象和String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法. 在JavaScript中,正则表达式是由一个RegExp对象表示的.当然,可以使用一个RegExp()构造函数来创建RegExp...
该代码使用正则表达式 `/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/` 来验证邮箱地址的格式,该正则表达式限定邮箱地址必须包含 `@` 符号和域名。 4. 数字验证 在 JavaScript 中,可以使用正则表达式来验证...
正则表达式(Regular Expression)是JS中进行字符串匹配和验证的强大工具。在这篇博客"JS 表单验证的15个正则表达式"中,作者分享了一些常用的正则表达式,帮助开发者实现更高效、准确的表单验证。 1. 邮箱验证: `...
在Web开发中,表单验证是一个非常...总的来说,文章通过具体的实例,向我们展示如何使用JavaScript对表单进行基本的验证。通过这些示例和专题的深入了解,可以帮助读者提升JavaScript编程的实践能力和解决问题的技巧。
- 使用正则表达式可以匹配这些范围内的字符。 ```javascript function isChinese(str) { return /[\u4e00-\u9fa5]/.test(str); } ``` 2. **只能输入汉字**: - 通过阻止非汉字字符的输入来实现。 ```html ...
这可以通过JavaScript的条件判断和正则表达式实现。例如,检查投票选项是否已选择,或者输入的邮箱格式是否正确。 4. **DOM操作**:Document Object Model (DOM)是HTML和XML文档的结构表示,JavaScript可以通过DOM ...
最后,这个练习可能要求创建一个登录界面,可以学习如何利用`<fieldset>`和`<legend>`对表单进行分组,以及如何使用`placeholder`属性提供提示信息。 通过这些练习,学习者能够全面掌握HTML5的基本语法和特性,并...
7.5.7 用正则表达式进行字符串分割 7.5.7 ——preg_split 115 7.6 字符操作的注意事项 117 7.7 小结 118 第8章 数组操作与数据结构算法 119 8.1 一维数组与多维数组 119 8.1.1 一维数组简介 119 8.1.2 多维数组简介 ...
在JavaScript中,对表单进行验证是常见的需求,特别是确保所有必要的输入字段都不为空,以保证数据的完整性和正确性。下面将详细讲解如何通过JavaScript实现这个功能。 首先,我们来看一个简单的示例,`demo1.html`...
HTML5 对表单进行了重大改进,增加了新的表单元素和属性,提高了用户体验和数据验证的能力。 - `<datalist>` 元素允许用户输入预设的选项列表中的值。 - `<keygen>` 元素为表单提供了密钥生成机制,可用于验证用户...
- `RegularExpressionValidator`: 用于检查字段的值是否匹配正则表达式。 ### 3. do-while 循环 - **知识点**: `do-while` 循环是一种先执行后判断的循环结构。 - **正确描述**: - `do-while` 的循环体至少执行...
- pattern:使用正则表达式定义字段的格式,如手机号码、邮箱等格式。 - validator:自定义校验函数,可以进行更复杂的校验逻辑。 例如: ```javascript rules: { name: [ { required: true, message: '不能为空...