日期:2014-05-16  浏览次数:20361 次

javascript 表单验证 (一)
表单
一、
1.获取表单
var oForm=document.getElementById("formId");
或者   var oForm=document.forms[0];
或者   var oForm=document.forms["formName"];
获取字段
oForm.elements[0]
oForm.elements["name"]
oForm.name
document.getElementById("id")

disabled\form\blur\focus

2.聚焦表单中第一个字段
(1)多数情况下用document.forms[0].elements[0].focus();就可以。但是如果表单中有字段是隐藏的就不能这样写,因为隐藏字段不支持focus方法,会报错。
所以应该用一下方法来实现:
首先判断是否存在一个表单,然后再遍历表单中所有字段,直到找到第一个不是隐藏字段
var FormUtil=new Object();
FormUtil.focusOnFirst=function(){
if(document.forms.length>0){
for(var i=0;i<document.forms[0].elements.length;i++){
var oField=document.form[0].elements[i];
if(oField.type!="hidden"){
oField.focus();
return;
}
}
}
}

(2)仅提交一次表单
方法不使用表单提交submit按钮,使用一般按钮
<input type="button" value="submit" onclick="this.disabled=true;this.form.submit()"></input>
(3)选择文本
用select()方法,但在调用之前需要首先获得焦点focus()
function selectText(){
var oInput=document.getElementById("input1");
oInput.focus();
oInput.select();
}
blur事件,仅当失去焦点时触发
change事件,文本改变且失去焦点触发,
select事件,选择文本时触发
(4)自动选择文本 <onfocus事件>
<input type="text" onfocus="this.select()" />
<textarea onfocus="this.select()" />
还可以用函数表示
function selectText(){
var colInputs=document.getElementByTagName("input");
var colTextArea=document.getElementByTagName("textarea");
for(var i=0;i<colInputs.length;i++){
if(colInputs[i].type=="text"||colInputs[i].type=="password"){
colInputs[i].onfocus=function(){
this.select();
}
}
}
for(var i=0;i<colTextArea.length;i++){
colTextArea[i].onfocus=function(){
this.select();
}
}
}

(5)当输入框超过一定长度时常常需要自动切换到下一个文本<onkeyup事件>
<input type="text" maxlength="4" onkeyup="tabFoward(this)" />
function tabFoward(oTextBox){
var oForm=oTextBox.form;
if(oForm.elements[oForm.elements.length-1]!=oTextBox && oTextBox.value.length==oTextBox.getAttribute("maxlength")){
for(var i=0;i<oForm.elements.length;i++){
if(oForm.elements[i]==oTextBox){
for(var j=i+1;j<oForm.elements.length;j++){
if(oForm.elements[j].type!="hidden"){
oForm.elements[i].focus();
return;
}
}
}
}
}
}
(6)限制textarea的输入长度(给输入框添加maxlength属性)<onkeypress事件>
<textarea rows="10" cols="10" maxlangth="20" onkeypress="return isNotMax()"  />
function isNotMax(oTextArea){
return oTextArea.value.length!=oTextArea.getAttribute("maxlength");
//尽管textarea中没有maxlength属性,但让可以用getAttribute来获取
}


(7)阻止无效字符的输入(给输入框添加invalidchars属性)<onkeypress事件>
<input type="text" invalidchars="123456789" onkeypress="return blockChars(this,event);" />
function blockChars(oTextbox,oEvent){
//格式化事件对象
oEvent=EventUtil.formatEvent(oEvent);

var sInvalidChars=oTextbox.getAttribute("invalidchars");
//用事件的charCode特性和String.fromCharCode()取出将被输入到文本中的字符
var sChar=String.fromCharCode(oEvent.charCode);
//判断所输入的字符是否存在无效字符
var bIsValidChar=sInvalidChars.indexOf(sChar)==-1;
//
return bIsValidChar || oEvent.ctrlKey;
}

(8)允许输入有效字符(给输入框添加validchars属性)<onkeypress事件>
<input type="text" invalidchars="123456789" onkeypress="return allowChars(this,event);" />
function allowChars(oTextbox,oEvent){
oEvent=EventUtil.formatEvent(oEvent);
var sInvalidChars=oTextbox.getAttribute("validchars");
var sChar=String.fromCharCode(oEvent.charCode);
var bIsValidChar=sInvalidChars.indexOf(sChar)>-1;
return bIsValidChar || oEvent.ctrlK