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.ctrlKey;
}

(9)粘贴的文本验证
禁止右键粘贴：
IE:onpaste="return false;"
<input type="text" invalidchars="123456789" onkeypress="return allowChars(this,event);" onpaste="return false;"/>
DOM:onpaste="return false;" oncontextmenu="return false;"
<input type="text" invalidchars="123456789" onkeypress="return allowChars(this,event);" onpaste="return false;" oncontextmenu="return false;"/>
禁止快捷键Ctrl+V粘贴,这个问题实际上就是触发keypress出现问题，所以只需要修改blockChars()\allowChars()方法即可
<input type="text" invalidchars="123456789" onkeypress="return allowChars(this,event,true);" onpaste="return false;" oncontextmenu="return false;"/>
function blockChars(oTextbox,oEvent,bBlockPaste){
oEvent=EventUtil.formatEvent(oEvent);
var sInvalidChars=oTextbox.getAttribute("invalidchars");
var sChar=String.fromCharCode(oEvent.charCode);
var bIsValidChar=sInvalidChars.indexOf(sChar)==-1;
if(bBlockPaste){
return bIsValidChar && !(oEvent.ctrlKey && sChar=="v")
}else{
return bIsValidChar || oEvent.ctrlKey;
}
}

function allowChars(oTextbox,oEvent,bBlockPaste){
oEvent=EventUtil.formatEvent(oEvent);
var sInvalidChars=oTextbox.getAttribute("validchars");
var sChar=String.fromCharCode(oEvent.charCode);
var bIsValidChar=sInvalidChars.indexOf(sChar)>-1;
if(bBlockPaste){
return bIsValidChar && !(oEvent.ctrlKey && sChar=="v")
}else{
return bIsValidChar || oEvent.ctrlKey;
}

}

(10)失去焦点时验证
与blockChars()一起用的方法：
<input type="text" invalidchars="123456789" onkeypress="return blockChars(this,event);" onblur="blurBlock(this)"/>
function blurBlock(oTextbox){
var sInvalidChars=oTextbox.getAttribute("invalidchars");
var arrInvalidChars=sInvalidChars.aplit("");//把无效字符串拆分成数组
for(var i=0;i<arrInvalidChars.length;i++){//循环验证是否存在无效字符
if(oTextbox.value.indexOf(arrInvalidChars[i])>-1){
alert("Character '"+arrInvalidChars[i]+"' not allowed!");
oTextbox.focus();
oTextbox.select();
return;
}
}
}


与blockChars()一起用的方法：
<input type="text" invalidchars="123456789" onkeypress="return blockChars(this,event);" onblur="blurAllow(this)"/>
function blurAllow(oTextbox){
var sInvalidChars=oTextbox.getAttribute("invalidchars");
var arrInvalidChars=sInvalidChars.aplit("");//把无效字符串拆分成数组
for(var i=0;i<arrInvalidChars.length;i++){//循环验证是否存在无效字符
if(oTextbox.value.indexOf(arrInvalidChars[i])==-1){
alert("Character '"+arrInvalidChars[i]+"' not allowed!");
oTextbox.focus();
oTextbox.select();
return;
}
}
}